<div>
<div class="left">左: 定宽</div>
<div class="right">右: 自适应</div>
</div>

过以下 CSS 代码实现两列布局效果

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

优点:

实现方式简单

缺点:

自适应元素 margin 属性值与定宽元素的width属性值保持一致

定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好

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