<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
- float + margin
.left{float:left;width:100px;}
.right{margin-left:110px;}
缺点：不兼容IE6;right中如果清除浮动，会产生bug
- float + margin + (fix)
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right-fix">
<div class="right">
<p>right</p><p>right</p>
</div>
</div>
</div>
.left{
float: left; width: 100px;
position: relative;//提高层级，才能选中其中的文字
}
.right-fix{
float: right; width: 100%;
margin-left: -100px;
}
.right{
margin-left: 120px;
}
- float + overflow
.left{
float:left;
width:100px;
margin-right:20px;//间距
}
.right{overflow:hidden;}
4.table
.parent{display: table; width: 100%;table-layout: fixed;}
.left{width:100px;padding-right:20px;}
.left,.right{display: table-cell;}
5.flex
.parent{display: flex;}
.left{width:100px;padding-right:20px;}
.right{flex: 1}
缺点：兼容性差；做小范围的布局
