系列文章:《两栏布局:一栏固定宽度另一栏自适应 的实现方法
本文主要是总结三栏布局中的“中间栏固定宽度两边自适应”的布局方法。

方法1:两边绝对布局,中间使用margin

HTML代码:

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

CSS代码:

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

优点:兼容性好;由于div.left和div.right使用了绝对定位,脱离了文档流,所以,div.left、div.right和div.main的加载顺序可以随意。

方法2:浮动布局 + margin

HTML代码:

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

CSS代码:

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

缺点:自适应宽度栏div.main需要在div.left和div.right后面加载。因为div.main不能定义float属性,一旦定义了float:left/right便自带定义了display:inline-block属性,使div.main的宽度等于自身内容的宽度,这样就达不到我们自适应栏的要求了;但是如果div.main不定义float:left/right属性并且位于div.left或div.right的前面,那么div.left或div.right将无法浮动于div.main的左侧或右侧。
综上,这种方法只能把div.main放于div.left和div.right后面加载。

方法3:浮动布局 + 负margin

HTML代码:

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

CSS代码:

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