圣杯布局和双飞翼布局

php中文网

发布时间：2016-10-15 10:32:04

1134人浏览过

来源于php中文网

原创

圣杯布局和双飞翼布局主要用来解决以下问题：

1.三列布局，两侧定宽，中间自适应。2.中间栏在浏览器中优先加载渲染。

解决思路：

首先把中间的div写到前面，然后左侧，然后右侧。这样就解决了第二个问题，中间的div优先渲染。

但是这样会存在一个问题，写到前面的也会显示在前面。

为了解决这个问题，我们让这三列都浮动起来。然后设置中间列宽度为100%。

此时中间列在第一行，左右都在第二行。此时只需要将左列移动到中间的左边，右列移动到中间的右边。我们给左右加一个固定宽度，比如150px。

然后给左列加一个负边距，margin-left：-100%；右列加一个负边距margin-left：-150px；

此时可以看到三列布局已经形成。但是问题在于，中间div的内容被挡住了。在解决这个问题上，圣杯布局和双飞翼布局开始出现不同的思路。

圣杯布局首先给三列div外面套上一个div，我们可以使用语义化标签article。将article设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative。此时可以看到三列都向中间缩进了。然后再分别给左右两列增加right和left的负值，就可以达到目的了。

代码如下：

元典智库

元典智库：智能开放的法律搜索引擎

下载

圣杯布局html代码：

<body>
    <article>
        <div class="main">
            我是中间
        div>
        <div class="left">
            我是左
        div>
        <div class="right">
            我是右
        div>
    article>
body>

圣杯布局css代码：

*{
    margin: 0;
    padding: 0;
}
article{
    padding-left:150px;
    padding-right:150px;
}
.main{
    background-color: lightblue;
    width:100%;   
}
.left{
    background-color: yellowgreen;
    width:150px;
    margin-left:-100%;
    position: relative;
    /*left:-150px;*/
}
.right{
    background-color: pink;
    width:150px;
    margin-left:-150px;
    position: relative;
    /*right:-150px;*/
}
.main,.left,.right{
    float: left;
}

双飞翼布局则是在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

代码如下：

双飞翼布局html代码：

<body>
    <div class="main">
        <div class="inside">
        我是中间
        div>           
    div>
    <div class="left">
        我是左
    div>
    <div class="right">
        我是右
    div>
body>

双飞翼布局css代码：

*{
    margin: 0;
    padding: 0;
}
.main{
    background-color: lightblue;
    width:100%;   
}
.inside{
    margin-left:150px;
    margin-right:150px;
}
.left{
    background-color: yellowgreen;
    width:150px;
    margin-left:-100%;
}
.right{
    background-color: pink;
    width:150px;
    margin-left:-150px;
}
.main,.left,.right{
    float: left;
}