网页布局中三栏布局的实现

时间：2010-10-21 来源：chemdemo

一、第一种：代码稍长，但是比较实用，页面主体先显示出来，也就是网速慢时，网页的主体内容先呈现给浏览者。

结构如下：

<div class="wrap">
<!-- main -->
        <div class="main">
                <div class="context">
                        <div class="inner">
                                <h1>这是主体部分</h1>
                        </div>
                </div>
        </div>
<!-- subMain -->
        <div class="subMain">
                <div class="inner"><h2>这是左边栏部分</h2></div>
        </div>
<!-- sider -->
        <div class="sider">
                <div class="inner"><h3>这是右边栏部分</h3></div>
        </div>
</div>

样式：

*{margin: 0;padding: 0;}
.wrap{width: 95%;margin: 0 auto;}
.main {
        width: 100%;
        float: left;
}
.context {
        background-color: #000;
        width: auto;
        margin: 0 25%;
        overflow: hidden; /* clear float */
        _zoom: 1; /* clear float for IE 6 */
}
.subMain, .sider {
        background-color: maroon;
        width: 25%;
        float: left;
}
.subMain {
        margin-left: -100%;
        _margin-left: -95%; /* IE 6 计算百分比方式与FF不同 */
}
.sider {
        margin-left: -25%;
}
.inner {background-color: #555;color: #FFF;margin: 1em;}

请单击查看Demo

二、第二种：比较容易实现，也比较直观，左边的左浮动，右边的有浮动，主体无浮动。缺点是ie6会出现3px bug，这要求栏目宽度固定，所以不太灵活。

结构：

<div class="wrap">
<!-- subMain -->
        <div class="subMain">
                <div class="inner"><h1>这是左边栏部分</h1></div>
        </div>
<!-- sider -->
        <div class="sider">
                <div class="inner"><h2>这是右边栏部分</h2></div>
        </div>
<!-- main -->
        <div class="main">
                <div class="inner"><h3>这是主体部分</h3></div>
        </div>
</div>

样式：

.subMain, .sider {
        background-color: maroon;
        width: 25%;
}
.subMain {
        float: left;
}
.sider {
        float: right;
}
.main {
        background-color: #000;
        margin: 0 25%;
        overflow: hidden;
        _zoom: 1;
        /* IE 6 下存在3px bug，可以使用左右外边距为原本值+3px的形式，即_margin:0 npx+3px; */
}

请单击查看Demo

三、第三种：定位布局，同样比较直观，三栏的显示顺序完全按照文档流的顺序。

结构：

<div class="wrap">
<!-- subMain -->
        <div class="subMain">
                <div class="inner"><h1>这是左边栏部分</h1></div>
        </div>
<!-- main -->
        <div class="main">
                <div class="inner"><h2>这是主体部分</h2></div>
        </div>
<!-- sider -->
        <div class="sider">
                <div class="inner"><h3>这是右边栏部分</h3></div>
        </div>
</div>

样式：

.subMain, .sider {
        background-color: maroon;
        width: 25%;
        position: absolute;
        top: 0;
}
.subMain {
        left: 0;
}
.sider {
        right: 0;
}
.main {
        background-color: #000;
        margin: 0 25%;
        overflow: hidden;
        _zoom: 1;
}

请单击查看Demo

注：等高的方法在此不做展示，很常用的方法就是边距法(padding-bottom = -margin-bottom = value ,value为一个比较大的值)。