您的位置：首页 > 其它

三栏布局（圣杯布局和双飞翼布局）

2017-05-27 11:40 274 查看

1.圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    height: 200px;
    overflow: hidden;
    padding: 0 200px;
}
.middle,.left,.right{
    float: left;
    height: 200px;
    position: relative;
}
.middle{
    width: 100%;
    background: #c4c4c4;
}
.left{
    width: 200px;
    background: blue;
    margin-left: -100%;
    left: -200px;
}
.right{
    width: 200px;
    background: green;
    margin-left: -200px;
    right: -200px;
}
</style>
</head>
<body>
    <div class="container">
        <div class="middle">中间内容部分自适应</div>
        <div class="left">左边栏</div>
        <div class="right">右边栏</div>
    </div>
</body>
</html>

2.双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    height: 200px;
    overflow: hidden;
}
.middle,.left,.right{
    height: 200px;
}
.mainBox{
    width: 100%;
    float: left;
}
.middle{
    margin: 0 200px;
    background: #c4c4c4;
}
.left{
    width: 200px;
    float: left;
    background: blue;
    margin-left: -100%;
}
.right{
    width: 200px;
    float: left;
    background: green;
    margin-left: -200px;
}
</style>
</head>
<body>
    <div class="container">
        <div class="mainBox">
            <div class="middle">中间内容部分自适应</div>
        </div>
        <div class="left">左边栏</div>
        <div class="right">右边栏</div>
    </div>
</body>
</html>

相同：圣杯布局和双飞翼布局的实现思路都是通过margin或padding的负值使三栏当中的元素占据一定的空间流，从而实现左右边栏固定，中间内容部分自适应。

不同：

（1）圣杯布局还需要在父元素内设置position:relative；和padding一定的数值，子元素内设置left或right值，从而调整左右边栏的位置。

（2）双飞翼布局就不用在设置position:relative,但是需要在主内容区域外层在套一层div，并设置margin值就可以了。

优势：这样布局的优势是可以在页面加载时，优先加载中间内容区域。

注意：需要在布局时把中间内容区域，写在最上方。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航