圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的几点区别:
- 圣杯布局的center,left和right是写在一个共同的父元素中的,双飞翼的左中右是分开写的
- 圣杯布局要使用position定位。
- 圣杯布局:center的width设置100%,此时,left和right被挤到了下一行,设置left的margin-left为-100%,相当于相对left的border-left向左移动100%的父元素单位,因为突破了紧挨浮动元素的下边缘,所以left向上移动,然后利用position将left的位置放置在左边。设置left的margin-right为-150px,设置的右边缘线突破了center元素下边缘的限制,因此向上移动至最右边。
<div id="header">header</div> <div id="container"> <div id="center" class="colomu"></div> <div id="left" class="colomu"></div> <div id="right" class="colomu"></div> </div> <div id="footer">footer</div>
body{ min-width: 550px; } #header,#footer{ height: 50px; background-color: aqua; text-align: center; } #container { padding-left: 200px; padding-right: 150px; height: 100px; } #container .colomu{ float: left; } #center{ /* left被挤到了下一行 */ width: 100%; background-color: blueviolet; height: 100px; } #left{ /* margin的百分比是相对于父元素说的,margin-left=-100%相当于距离conter元素的右边框200px */ width: 200px; height: 100px; margin-left: -100%; background-color: aquamarine; position: relative; right: 200px; } #right{ width: 150px; height: 100px; background-color: aquamarine; margin-right: -150px; } #footer{ clear: both; }
2.双飞翼布局: 双飞翼布局不再使用position来定位left的位置,直接使用margin-left: -100%
<div id="header">header</div> <div id="container" class="column"> <div id="center">center</div> </div> <div id="left" class="column">left</div> <div id="right" class="column">right</div> <div id="footer">footer</div>
body { min-width: 500px; } div { height: 100px; } #header, #footer { background-color: aquamarine; } #container { width: 100%; } .column { float: left; } #center { margin-left: 200px; margin-right: 150px; background-color: blueviolet; } #left { width: 200px; background-color: aqua; margin-left: -100%; } #right { width: 150px; background-color: aqua; margin-left: -150px; } #footer { clear: both; }