div+css 常用两栏/三种自动适应宽度分栏兼容ie6\7\8\9 火狐谷歌等浏览器

本文详细介绍了使用CSS实现两列和三列自适应宽度分栏布局的方法，包括如何设置固定宽度和自适应宽度的元素，以及如何清除浮动以确保布局正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div+css 常用三种自动适应宽度分栏
CSS两列布局，右侧固定，左侧自适应宽度
<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">
<div style="width:200px; float:right; background:#090">这是右侧的内容</div>
<div style=" margin-right:210px; background:#F33">这是左侧的内容，自适应宽度</div>
</div>

CSS两列布局，左侧固定，右侧自适应宽度
<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">
<div style="width:150px; float:left; background:#6F0">这是左侧的内容固定宽度</div>
<div style=" margin-left:160px; background:#FC0">中间内容，自适应宽度</div>
</div>

CSS三列布局，左右宽度固定，中间自适应宽度
<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">
<div style="width:200px; float:right; background:#393"> 这是右侧的内容固定宽度</div>
<div style="width:150px; float:left; background:#F60 ">这是左侧的内容固定宽度</div>
<div style=" margin-left:160px;margin-right:210px; background:#6C3;">中间内容，自适应宽度</div>
</div>
overflow:auto; _display:inline-block; 是清除浮动的，_display:inline-block;针对IE6的。