<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 代码实现两列布局效果: