圣杯布局和双下翼布局

圣杯布局和双下翼布局
区别
(1） 圣杯布局：通过设置padding t中间栏给两边腾出位置：（存在一个
最小宽度问题：
由于设置了相对定位
所以当left原来的位置和right的位
置产生重叠时，
由于浮动的原因一行放不下就会换行，所以minwidth
left-width * 2 + right-width)
(2） 双飞翼布局：避免了上面的问题，给中间栏目加了一个内容层，通过
给内容层设置margin， 保持中问栏不变，让内容部分给两边腾开位置：
(不能给中间栏目设置margin力了中间栏目自适应卡宽度，因为我们已
经设置了 wiath： 100%．再设置margin 的话就会超过窗口的宽度）

 我先做个案例给大家看看

 

 样式写几个盒子分别设置背景颜色 

 分别设置内容字数

最后的效果是高度会由内容而撑开