双飞翼布局_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> ```