圣杯布局与双飞翼布局

最新推荐文章于 2018-09-30 10:35:46 发布

木子PZ

最新推荐文章于 2018-09-30 10:35:46 发布

阅读量1.1k

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/sinat_24044741/article/details/52719078

版权

HTML 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

圣杯布局与双飞翼布局都是利用元素的负边距来使元素排版在预定的位置。
对于金典的三列布局，中间内容为主体部分（即最重要的部分），左右两侧不能遮挡主体内容。
1.圣杯布局：使三列元素成为浮动元素，再给它们设置负边距让其在预设位置，然后设置父级元素的padding值，给两侧元素留出放置空间，最后设置左右侧栏的左右位置，使其定位在主体内容的两边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            clear: both;
            padding-left: 200px;
            padding-right: 200px;
        }
        .left {
            width: 200px;
            height:50px;
            background-color: #00cc99;
            float: left;
            position: relative;
            margin-left: -100%;
            left: -200px;
        }
        .right {
            width: 200px;
            height: 50px;
            background-color: #00b3ee;
            float: left;
            position: relative;
            margin-left: -200px;
            right: -200px;
        }
        .main {
            width: 100%;
            height: 50px;
            background-color: #d9534f;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

2.双飞翼布局
双飞翼布局是对圣杯布局的一种改进。同样是采用浮动元素负边距的特性，使相关元素达到预定的要求后，再设置相应的margin使得左右边距正好处于margin的空间中。
在中间主体部分中增加一个inner的div子元素，用来承载主体内容去掉了相对定位和父元素的padding留空，由于左右两侧还是遮住了这题内容，因此还是需要设置inner的margin来使它们排版在预定位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            clear: both;
        }
        .left {
            width: 200px;
            height:50px;
            background-color: #00cc99;
            float: left;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            height: 50px;
            background-color: #00b3ee;
            float: left;
            margin-left: -200px;
        }
        .main {
            width: 100%;
            height: 50px;
            background-color: #d9534f;
            float: left;
        }
        .inner {
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="inner"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>