CSS实现三栏网页宽度自适应

CSS实现三栏网页宽度自适应

• 绝对定位+margin：不推荐使用

思路：

左右两栏采用绝对定定位，分别固定在页

面的左右两侧，中间主栏不设置宽度，用

左右margin值撑开距离，于是实现三栏自

适应布局

绝对定位+margin

优点：理解容易，上手简单，受内部元素

影响而破坏布局概率低

缺点：如果中间栏含有最小宽度限制,或是

含有宽度内部元素，当浏览器宽度小到一定

程度,会发生重叠的情况;比较死板,牵一发

而动全身.而且如果非自适应的栏度高度超

过自适应的栏高度,并不能撑开底下的footer

• 负margin+float

思路：

三栏均为float:left;首先中间的主题使用双标

签,外层div宽度100%显示,并margin-left，

margin-right为-200px意味着原本应在的位置

可以向左和向右再占200px（width仍然占着

100%的宽度,只是不用换行去占这么大地了)

则此时3栏位于同一行,且左栏与中间栏左侧

重叠,右栏与中间栏右侧重叠,只要再将中间栏

的数据左右往里各挤200px即可,所以中间栏

中再加了个div,设其margin:0 200px即可

负margin+float

• margin+float

思路：左右两栏分别设置左和右浮动，中间

栏设置左右的margin适配左右两栏的宽度，

因为左右两栏固定宽度的，所以中间的区域

宽度就可以根据margin做到自适应了，但是

需要注意的有两点，一点是中间栏需要最后

声明，这一点十分重要因为你中间栏的宽度

自适应，所以他会自动的填满整个宽度，这

样会导致右边栏空间不足，浮动到下一行，

第二点是中间栏的左右margin一定要适配左

右两栏，因为浮动元素脱离文档流，但是元

素中的内容是在文档流中的，所以就会导致

中间栏填满整个width，而浮动元素中的内

容却在文档流中的奇怪效果

margin+float

前三种若要在最外层包裹一个div，div的最

高度取决于三个子元素中最高的高度：

只要在3栏外面容器加上overflow:hidden，

然后分别给三栏加上：margin-bottom:-

height;padding-bottom:height;即可。但是有

个BUG：IE7不work

• css3新特性:flex布局---推荐使用

flex布局

最外层包裹的div的高度可以取决于三个子元

素中最高的高度，只需要在#box里面加上

align-items: flex-start;即可flex使用起来简单

方便，网页布局最好用它，具体语法参考

Flex布局