页面布局-多列布局-不定宽与自适应 2.16

1.float + overflow

.left{float:left;margin-right:20px;}
.right{overflow: hidden;}
.left p{width: 20px;}//宽跟着内容走

2.table

.parent{display: table; width: 100%;}
.left,.right{display: table-cell;}
.left{width: 0.1%;padding-right: 20px;} //width设的足够小,直接有内容将宽度撑起。width: 1%的话,IE8中兼容有问题。
.left p{width: 200px;}

缺点:不兼容IE6

3.flex

.parent{display:flex;}
.left{width:200px; margin-right:20px;}
.right{flex:1;}

flex很强大,就是兼容性的问题。

你可能感兴趣的:(页面布局-多列布局-不定宽与自适应 2.16)