<div class="parent">
<div class="left">左: 定寬</div>
<div class="right">右: 自適應</div>
</div>

過以下 CSS 代碼實現兩列布局效果

.parent{
display: table;
table-layout: fixed;
}
.left, .right{display: table-cell;}
.left{width:100px;}

優點:

瀏覽器兼容性比較好

缺點:

將所有元素的 display 屬性設置為 table 相關值, 受到相應制約

<div class="parent">
<div class="left">左: 定寬</div>
<div class="right">右: 自適應</div>
</div>

過以下 CSS 代碼實現兩列布局效果

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

優點:

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

缺點:

overflow 屬性不僅解決了兩列布局問題, 同時設置了內容溢出的情況

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

過以下 CSS 代碼實現兩列布局效果: