CSS 中双栏布局的实现

用 CSS 可以比较简单地实现各种双栏布局，这里以左右双栏布局为例。双栏布局包括如下四种：（1）左右均为固定宽度；（2）左右均为比例宽度；（3）左边为固定宽度右边为浮动宽度；（4）右边为固定宽度左边为浮动宽度。

（1）左右均为固定宽度：这种情形比较简单。CSS内容如下：

#left {
     300px;
}
#right {
     700px;
    float: left;
}

（2）左右均为比例宽度：这种情形也简单，CSS内容如下：

#left {
     30%;
}
#right {

     70%;
    float: left;
}

注意左右的宽度比例之和最好不要恰好达到100%，否则会造成左右两栏在一些浏览器（比如 IE8）中无法并排而上下错开。

（3）左边为固定宽度右边占用剩余宽度：这种情形稍微困难，CSS内容如下：

#left {
    150px;
    position:absolute;
    left:0;
}
#right {
    position:absolute;
    left:160px;
}

其中使用了绝对定位的方式。如果不使用绝对定位也可以做到，不过需要多一层wrapper（参考[1]）。

（4）右边为固定宽度左边占用剩余宽度：这种情形和前面情形类似，CSS内容如下：

#right {
    150px;
    position:absolute;
    right:0;
}
#left {
    position:absolute;
    right:160px;
}

参考资料：

[YAML] Date: 2011-05-23 17:55:47, Updated: 2013-01-01 12:33:00