CSS实现三栏网页宽度自适应
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使用起来简单
方便，网页布局最好用它，具体语法参考
