经典三列布局

Posted 2020-06-09

html代码中，middle部分首先要放在container的最前面，然后是left,right。三列布局，中间宽度自适应，两边定宽。
1.【国外】圣杯布局：左中右三列都设置浮动和相对定位，中列宽度100%占满，左右两列都有负边距，左列有左定位数，右列有右定位数。（IE6有问题）

<div class="cupContainer">
<div class="middle">中列</div>
<div class="left">左列</div>
<div class="right">右列</div>
</div>

2.【淘宝】双飞翼布局：左中右三列都设置浮动，中列宽度100%占满，中列内部有左右正边距，左右两列都有负边距。

<div class="birdContainer">
<div class="middle">
<div class="midCon">中列</div>
</div>
<div class="left">左列</div>
<div class="right">右列</div>
</div>