雙飛翼布局_margin方式 · 學海無涯_究其本質_李東旭

>[danger]什么是雙飛翼布局? 1. 先看效果圖如下: (兩邊固定寬度, 中間自適應的形式) ![](https://box.kancloud.cn/c8b1492ab2200a2528ba6bc4ce0809a8_1081x441.png) 2. 設計思路: (1): 3個div浮動在一行顯示, 中間div需要把內容寫在子div中. (2): 中間內層div, 設置左右margin留下空隙, (3): 有地方后, 再讓左右固定寬度div設置負的margin, 擠上來(因為負margin值會向上進行靠攏, 所以從第二行跑到了上一行來顯示 3. 代碼如下: ``` <style> *{ margin: 0; } .wrap { overflow: hidden; } .left_div, .main_div, .right_div { float: left; height: 130px; color: white; } .left_div { margin-left: -100%; width: 200px; background: red; } .right_div { margin-left: -200px; width: 200px; background: blue; } .main_div { width: 100%; height: 130px; background: green; } .main_content{ margin-left: 200px; margin-right: 200px; } </style> <body>  <div class="wrap">  <div class="main_div"> <div class="main_content">中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容</div> </div> <div class="left_div">左-紅色Div</div> <div class="right_div">右-藍色Div</div> </div> </body> ```