响应式页面布局的迅速普及,一栏固定宽度另一栏自适应宽度的需求比较常见。是时候mark down一下了。

假如我们要实现左右两栏布局,左栏固定宽度,右栏宽度自适应。以下是一些常用的实现方法。

方法1. 左浮动 + margin

固定宽度栏定义左浮动并固定宽度,以使自适应宽度栏div.main能浮动起来;通过定义自适应宽度栏的margin-left等于固定栏的宽度,使视觉上左右两栏分离。
HTML代码:

<div class="left"></div>
<div class="main"></div>

CSS代码:

.left {
    width: 200px;
    float: left;
}
.main {
    margin-left: 200px;
}

优缺点:需要注意div.left和div.main的在HTML中的先后顺序;兼容性好;需要注意div.left在IE6中可能遇到双margin的bug,可以添加display:inline来解决;

方法2:绝对定位 + margin-left

通过定义固定宽度栏的元素div.left为绝对定位,使其脱离文档流,然后定义自适应栏元素div.main的margin-left为固定栏元素的宽度,使其视觉上实现两栏布局;
HTML代码:

<div class="parent">
    <div class="left"></div>
    <div class="main"></div>
</div>

CSS代码:

.parent {
    position: relative;
}
.left {
    position: absolute;
    width: 200px;
}
.main {
    margin-left: 200px;
}

优缺点:由于div.left已脱离文档流,所以,div.left和div.main的加载先后顺序并没有严格要求;兼容性好;

方法3:左浮动 + 负margin

利用了浮动元素会脱离文档流的原理,通过负margin的调整使浮动元素视觉上左右两栏布局;
HTML代码:

<div clas="main-box">
    <div class="main"></div>
</div>
<div class="left"></div>

CSS代码:

.main-box {
    float: left;
    width: 100%;
}
.main {
    margin-left: 210px;
}
.left {
    float: left;
    width: 200px;
    margin-left: -100%;
}
本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/254