CSS实现两栏布局

写在前面

两栏布局是指页面布局由主栏和边栏组成，是许多网页的布局方式，一般使用CSS去实现两栏布局。

实现两栏布局的方式有多种，这里采用四种比较常见的实现方式。主要是流体布局(liquid layouts)，凝胶布局(Jello layouts)，绝对布局(absolute layouts)，表格布局(table layouts)。

所有源码在底部。

流体布局

浏览器显示HTML元素，是从HTML文件最上面开始，从上往下沿元素流显示各个元素，像一个流体一样。

页面布局如下:

    <header>页眉.................</header>
    <div id="section">
        内容开始
        <p>段落1...................................</p>
        <p>段落2...................................</p>
        <p>段落3...................................</p>
        <p>超长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长段落</p>
        内容结束
    </div>
    <div id="aside">
        <p>段落1...................................</p>
        <p>段落1...................................</p>
        <p>段落2...................................</p>
        <p>段落3...................................</p>
        <p>长长长长长长长长长长长长长长长长长长长长长长长长长长长段落</p>
    </div>
    <footer>
        页脚
    </footer>

效果如下:

为了实现两栏布局，就要让页面左栏浮动起来

    div#section
    {
        float: left; // 让页面左栏浮动起来
    }

如果光让左栏浮动起来，浏览宽度足够的时候显示会正常，宽度不够时，则会遮挡住页脚

这时候就要清除浮动，就能让页脚不被遮挡

    footer
    {
        clear: left; // 清除浮动，clear的值有 left/right/both，分别是清除左/右/两边的浮动
    }

冻结布局

流体布局当用户拉长或者缩小浏览器时，页面的内容会随之换行，很多时候这并是不我们想要看到的效果，这时候就要把页面冻结住，使用冻结布局。

冻结布局就是在流体布局的最外层，加一层div，并且指定宽度。

    <div id="allcontent"> // 实现冻结布局
        <header>页眉.................</header>
        <div id="section">
            内容开始
            <p>段落1...................................</p>
            <p>段落2...................................</p>
            <p>段落3...................................</p>
            <p>超长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长段落</p>
            内容结束
        </div>
        <div id="aside">
            <p>段落1...................................</p>
            <p>段落1...................................</p>
            <p>段落2...................................</p>
            <p>段落3...................................</p>
            <p>长长长长长长长长长长长长长长长长长长长长长长长长长长长段落</p>
        </div>
        <footer>
            页脚
        </footer>
    </div>

    div#allcontent
    {
        width: 1200px; // 指定宽度为1200px
    }

凝胶布局

当我们使用冻结布局，页面就会停靠在左边，为了使页面居中，就要使用凝胶布局。

凝胶布局就是将页面最外层的div的左外边距和右外边距设置为auto。凝胶布局无论浏览器大小如何变化，页面始终会居中。

    div#allcontent
    {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

绝对布局

绝对布局就是使用position:absolute对元素进行布局。

position有四个属性，默认就是static，就是不会被定位。absolute使用最近的父元素进行定位。fixed使用视窗进行定位，也就是使用浏览器进行定位。relative使用元素本身在正常位置进行定位。

两栏布局可以使用绝对定位，指定一定的像素，来实现绝对布局，

    div#aside
    {
        position: absolute; // 绝对布局
        top: 170px; // 距离父元素顶部边框170px
        right: 0px; // 距离父元素右部边框0px
        width: 300px; // 指定宽度
    }

由于绝对定位是将元素从流中删除，所以更改浏览器大小时，也会出现边框遮挡住页脚的情况。

表格布局

表格布局就是将页面用表格的形式进行布局。使用display:table进行实现。

HTML中也有<table>标签，有的人实现表格布局会使用<table>标签，但是这是不合理的。HTML是超文本标记语言，各个标签都有自己对应的语义，目的是为了结构清晰，所以不应该使用HTML来进行表格布局，而应该使用CSS进行布局的操作。

    <header>页眉.................</header>
    <div id="tableContainer">
        <div id="tableRow">
            <div id="section">
                内容开始
                <p>段落1...................................</p>
                <p>段落2...................................</p>
                <p>段落3...................................</p>
                <p>超长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长段落</p>
                内容结束
            </div>
            <div id="aside">
                <p>段落1...................................</p>
                <p>段落1...................................</p>
                <p>段落2...................................</p>
                <p>段落3...................................</p>
                <p>长长长长长长长长长长长长长长长长长长长长长长长长长长长段落</p>
            </div>
        </div>
    </div>
    <footer>
        页脚
    </footer>

表格布局需要在最外层的div中使用display:table

    div#tableContainer
    {
        display: table; // 最外层div设置为表格
        border-spacing: 10px; // 表格布局没有外边距，border-spacing就是等同于margin
    }
    div#tableRow
    {
        display: table-row; // 设置一行，也可以设置多行
    }
    div#section
    {
        display: table-cell; // 将div设置为表格中的单元格
        background-color: rgb(93, 173, 226);
    }
    div#aside
    {
        display: table-cell; // 将div设置为表格中的单元格
        background-color: rgb(133, 146, 158);
    }

写在最后

实现布局的方式可以有许多种，使用哪一种具体看业务需求，但是两栏布局比较适合使用表格布局，而且，日常使用中，一般不会单独使用一种布局，多种布局同时使用才是常态，才能实现最好的效果。

完整源码链接：https://github.com/yijidao/layouts