4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应

优点:简单

缺点:不兼容IE6

4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应_第1张图片


优点:兼容性好

缺点:结构多一点

4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应_第2张图片


优点:样式简单

缺点:不兼容IE6

同样适用于不定宽与自适应

可以实现伪等高

添加:.parent{overflow:hidden;}

         .left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应_第3张图片


缺点:代码多,不支持IE67

同样适用于不定宽与自适应

去掉table-layout:fixed;

修改:.left{width:0.1%;padding-right:20px;}

         .left p{width:200px;}

同样可以实现等高布局

4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应_第4张图片


缺点:低版本浏览器不兼容,一般用于小范围布局

同样适用于不定宽与自适应

同样可以实现等高布局

4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应_第5张图片


多列定宽和一列自适应

同样适用于多列不定宽与自适应

去掉:width:100px;

添加:.left p,.center p{width:100px;}

4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应_第6张图片

你可能感兴趣的:(4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应)