CSS系列，三栏布局的四种方法

三栏布局、两栏布局都是我们在平时项目里经常使用的，今天我们来玩一下三栏布局的四种写法，以及它的使用场景。

所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式。

1.绝对定位法

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

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

<div class="right">Right</div>

    /* 简单的进行CSS reset */

    body,

    html {

        height: 100%;

        padding: 0px;

        margin: 0px;

    }

    /* 左右绝对定位 */

    .left,

    .right {

        position: absolute;

        top: 0px;

        background: beige;

        height: 100%;

    }

    .left {

        left: 0;

        width: 100px;

    }

    .right {

        right: 0px;

        width: 200px;

    }

    /* 中间使用margin空出左右元素所占据的空间 */

    .main {

        margin: 0px 200px 0px 100px;

        height: 100%;

        background: gray;

    }

该方法有个明显的缺点，就是如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

2. 圣杯布局

//注意元素次序

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

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

<div class="right">Right</div>

/* CSS reset */

body,html{

    height:100%;

    padding: 0;

    margin: 0

}

/* 父元素body空出左右栏位 */

body {

    padding-left: 100px;

    padding-right: 200px;

}

/* 左边元素更改 */

.left {

    background: beige;

    width: 100px;

    float: left;

    margin-left: -100%;

    position: relative;

    left: -100px;

    height: 100%;

}

/* 中间部分 */

.main {

    background: gray;

    width: 100%;

    height: 100%;

    float: left;

}

/* 右边元素定义 */

.right {

    background: beige;

    width: 200px;

    height: 100%;

    float: left;

    margin-left: -200px;

    position: relative;

    right: -200px;

}

3. 双飞翼布局

<div class="main">

    <div class="inner">

        Main

    </div>

</div>

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

<div class="right">Right</div>

/* CSS reset */

body,html {

    height:100%;

    padding: 0;

    margin: 0

}

body {

    /*padding-left:100px;*/

    /*padding-right:200px;*/

}

.left {

    background: beige;

    width: 100px;

    float: left;

    margin-left: -100%;

    height: 100%;

    /*position: relative;*/

    /*left:-100px;*/

}

.main {

    background: gray;

    width: 100%;

    float: left;

    height: 100%;

}

.right {

    background: beige;

    width: 200px;

    float: left;

    margin-left: -200px;

    height: 100%;

    /*position:relative;*/

    /*right:-200px;*/

}

/* 新增inner元素 */

.inner {

    margin-left: 100px;

    margin-right: 200px;

}

圣杯布局看起来是复杂的，后期维护性也不是很高，在淘宝UED的探讨下，出来了一种新的布局方式就是双飞翼布局。

代码如上。增加多一个div就可以不用相对布局了，只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。

4. 浮动

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

    <div class="right">Right</div>

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

/* CSS reset */

body,html {

    height:100%;

    padding: 0;

    margin: 0

}

/* 左栏左浮动 */

.left {

    background: beige;

    width: 100px;

    float: left;

    height: 100%;

}

/* 中间自适应 */

.main {

    background: gray;

    height: 100%;

    margin:0px 200px 0px 100px;

}

/* 右栏右浮动 */

.right {

    background: beige;

    width: 200px;

    float: right;

    height: 100%;

}

这种方式代码足够简洁与高效，也容易理解

提点

四种方法其实只有圣杯布局和双飞翼布局较难理解，但实际上理解了圣杯布局，双飞翼布局自然就理解了。

巴特西

CSS系列，三栏布局的四种方法

1.绝对定位法

2. 圣杯布局

3. 双飞翼布局

4. 浮动

提点

最新文章

热门文章