标签：
不定宽：指可设置任意宽度，或宽度有内容决定。
自适应：无论其他元素怎么变，它都不用改。
命题：设置不定宽与自适应
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>
方案1：float+overflow
.left{
float:left;
width:100px; //.left p{width:200px;}
margin-right:20px;
}
.right{
overflow:hidden;
}
方案2：table
//布局优先
.parent{
display:table;
width:100%; //table默认宽度以内容为准，每列的宽度之和为table总宽
table-layout:fixed; //提高渲染速度，实现了布局优先
}
.left,.right{
display:table-cell; //设为单元格 不能设margin
}
.left{
width: 100 px;
padding-right:20px;
}
//内容优先
.parent{
display:table;
width:100%; //table默认宽度以内容为准，每列的宽度之和为table总宽
}
.left,.right{
display:table-cell; //设为单元格 不能设margin
}
.left{
width:0.1%;
padding-right:20px;
}
.left p{
width:200px;
}
方案3：flex
.parent{
display:flex;
}
.left{
width: 100 px; //.left p{width:200px;}
margin-right:20px;
}
.right{
flex:1; //相当于flex:1 1 0; 剩余空间都给了right
}
附加：多列不定宽与自适应
把不定宽的样式设为一致即可
标签：
原文地址：http://www.cnblogs.com/july-Vivian/p/4614701.html
