圣杯布局和双飞翼布局-html教程-PHP中文网

圣杯布局和双飞翼布局

php中文网

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

原创

1128人浏览过

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

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的负值，就可以达到目的了。

代码如下：

飞桨PaddlePaddle

飞桨PaddlePaddle开发者社区与布道，与社区共同进步

查看详情

<span style="color: #0000ff;"><span style="color: #0000ff;">圣杯布局</span>html代码：<br /><br /><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是中间
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是左
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            我是右
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

登录后复制

<span style="color: #800000;">圣杯布局css代码：

*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
article</span>{<span style="color: #ff0000;">
    padding-left</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    padding-right</span>:<span style="color: #0000ff;">150px</span>;
}<span style="color: #800000;">
.main</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100%</span>;   
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> yellowgreen</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-100%</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">left:-150px;</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-150px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">right:-150px;</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.main,.left,.right</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}

登录后复制

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

代码如下：

<span style="color: #000000;">双飞翼布局html代码：

</span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inside"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是中间
        </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>           
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是左
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是右
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

登录后复制

<span style="color: #800000;">双飞翼布局css代码：

*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.main</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100%</span>;   
}<span style="color: #800000;">
.inside</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;">150px</span>;
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> yellowgreen</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-100%</span>;
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;">-150px</span>;
}<span style="color: #800000;">
.main,.left,.right</span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}

登录后复制

接下来如果我们想让三列等高，可以给三列分别增加属性padding-bottom: 9999px;margin-bottom: -9999px;来将三列拉到无限长。再给三列外面的article标签加上overflow: hidden;属性就行了。

Ending。

大家都在看：

CSS浮动机制解析：理解元素脱离文档流后的布局行为优化网页键盘事件处理：避免全局快捷键与用户输入冲突 Elementor Pro 中使用 Flexbox 实现并排布局的专业教程 CSS Flexbox布局中内容溢出滚动问题的解决方案使用jQuery高效访问和操作HTML表格单元格教程