雙飛翼佈局內容不換行_CSS 佈局，float+margin負值實現聖盃佈局
阿新 • • 發佈：2020-12-10
技術標籤：雙飛翼佈局內容不換行
該文章重溫一下之前float佈局橫行的年代裡，是如何實現一個聖盃佈局和雙飛翼佈局。
話不多說，一個聖盃佈局的最終效果如下圖所示:
如果閉著眼睛寫，我想使用一手flex佈局，輔之以less大法，不出2分鐘，這個樣式是手到擒來，如下
html <body> <header> this is header </header> <main> <section class='left‘ left </section> <section class='content‘‘ content </section> <section class='right'> right </section> </main> <footer> this is footer </footer> </body> less body * { box-sizing: border-box; } header, footer { border: 1px solid red; } main { display: flex; .left { width: 200px } .right { width: 150px } .content { flex: 1 } > section { border: 1px solid red; } }
但是，如果使用float佈局來寫這個樣式呢？
-- 頭部底部固定，兩側內容固定，中間內容自適應。
技術總結一下:
- 使用float佈局
- 兩側使用margin負值，以便中間內容橫向重疊
- 防止中間的內容被兩側覆蓋，巧妙的利用padding和margin
show me your code
<body> <header> this is header </header> <main> <section class='content‘‘ content </section> <section class='left‘ left </section> <section class='right'> right </section> </main> <footer> this is footer </footer> </body> css body * { box-sizing: border-box; } header, footer { width: 100%; border: 1px solid red; } section { border: 1px solid black; float: left; // * } .left { width: 200px; margin-left: -100%; // * position: relative；// * right: 200px; // * } .right { width: 150px; // * margin-right: -150px; // * } .content { width: 100%; } main { padding-left: 200px; padding-right: 150px; } footer { clear: both; }
不得不說，margin負值還有有一些值得回味的東西的，其表現形式如下:
- margin-top, margin-left 負值，則該元素會向上或者向左移動相應的位置
- margin-right負值，其右側元素會左移相應的位置，而其自身不受影響
- margin-bottom負值，其下方元素會向上移動相應的位置，其自身不受影響