<div>
<div class="left">左: 定寬</div>
<div class="right">右: 自適應(yīng)</div>
</div>

過以下 CSS 代碼實(shí)現(xiàn)兩列布局效果

.left{
width:100px;
float:left;
}
.right{margin-left:100px;}

優(yōu)點(diǎn):

實(shí)現(xiàn)方式簡單

缺點(diǎn):

自適應(yīng)元素 margin 屬性值與定寬元素的width屬性值保持一致

定寬元素浮動與自適應(yīng)元素不浮動導(dǎo)致瀏覽器兼容性不好

<div class="parent">
<div class="left">左: 定寬</div>
<div class="right">右: 自適應(yīng)</div>
</div>

過以下 CSS 代碼實(shí)現(xiàn)兩列布局效果

.left{
width:100px;
float:left;
}
.right{overflow:hidden;}

優(yōu)點(diǎn):

上述解決方案中的問題在此解決方案中都沒有

缺點(diǎn):

overflow 屬性不僅解決了兩列布局問題, 同時(shí)設(shè)置了內(nèi)容溢出的情況

<div class="parent">
<div class="left">左: 定寬</div>
<div class="right-fix">
<div class="right">右: 自適應(yīng)</div>
</div>
</div>

過以下 CSS 代碼實(shí)現(xiàn)兩列布局效果: