介绍

圣杯布局

我们先写一个html主体：

<div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>

然后再给它们加上一点点样式：

 *{
        margin: 0;
        padding: 0;
    }
    .page{
        height: 200px;
    }
    .left,.right{
        height: 200px;
        width: 200px;
        background: green;
    }
    .content{
        height: 200px;
        background: pink;
    }

然后我们就能看看效果了

我们要实现三栏布局主要就是要把两个广告位放到主要内容的一左一右，接下来来了解一下实现三栏布局的三种方式吧！

圣杯布局

在上面基本的html和css中在添加一点css

.page{
    padding: 0 200px;
}

为 .page 设置左右内边距各200px，以便为 .left 和 .right 预留空间。

.page div{
    float: left;
}

使 .page 中的所有 div 元素都浮动到左侧，从而在同一行显示。

.content{
    width: 100%;
}

设置 .content 的宽度为100%，使其占据父容器 .page 的全部宽度。

.left{
    margin-left: -200px;
    position: relative;
    left: -100%;
}

这段代码的目的是将 .left 元素放置到 .content 的左边。通过设置 margin-left: -200px; 把 .left 元素拉回到页面的左侧。然后使用 position: relative; 和 left: -100%; 将 .left 元素相对其当前位置向左移动整个父容器 .page 的宽度。可以看一下到这步的效果：

.right{
    margin-right: -200px;
}

这段代码将 .right 元素的右外边距设置为 -200px，从而将其放置到 .content 元素的右侧。

总的就能实现三栏布局的效果了：

圣杯布局主要通过负外边距和相对定位，将左右边栏正确地放置在中间内容区域的两侧。

双飞翼布局

这里与上面html结果有点不同：

<div class="page">
        <div class="content">
            <div class="inner">主要内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>

.content 内部还有一个子元素 .inner，用于存放主要内容。

.inner{
    margin: 0 200px;
}

设置 .inner 的左右内边距各200px，以便为 .left 和 .right 预留空间。

.page > div{       /*page下一层的div 不包含inner的div*/
    float: left;
}

使 .page 直接子元素（.content、.left 和 .right）浮动到左侧，从而在同一行显示。

这里因为宽度不够导致left和right往下一格移

.left{
    margin-left: -100%;
}

这段代码的目的是将 .left 元素放置到 .content 的左边。通过设置 margin-left: -100%;，将 .left 元素拉回到页面的左侧。

.right{
    margin-left: -200px;
}

这段代码将 .right 元素的左外边距设置为 -200px，从而将其放置到 .content 元素的右侧。

这里也实现了三栏布局。双飞翼关键是

• 浮动布局：.page 的直接子元素通过 float: left 在同一行显示。
• 负外边距：通过 margin-left: -100% 和 margin-left: -200px 将 .left 和 .right 正确定位。

Flex

还是基于基本的html结果和css样式来实现：

.page{
    display: flex;
}

这段代码将 .page 设置为弹性容器（flex container）。弹性容器中的子元素（.content、.left 和 .right）将按照弹性布局模型排列。

.content{
    flex: 1;
    order: 1;
}

设置 .content 元素的 flex 属性为1，表示它将占据弹性容器中剩余的所有可用空间。同时，order: 1 将 .content 元素的排列顺序设置为1，确保它在 .left 之后、.right 之前显示。

.right{
    order: 2;
}

设置 .right 元素的 order 属性为2，确保它在 .content 之后显示。

同样也是先了：

弹性布局Flex是相对于最简单实现三栏布局的方法它的关键点：

• 弹性容器：将 .page 设置为 display: flex，使其成为弹性容器。

• 弹性项目：.content、.left 和 .right 成为弹性项目（flex items）。

• 弹性属性：通过 flex: 1 使 .content 占据剩余的可用空间。

• 排列顺序：通过 order 属性控制子元素的排列顺序，确保 .content 在中间，.left 在最左侧，.right 在最右侧。

总结

三栏布局在网页设计中十分常见，可以通过圣杯布局、双飞翼布局和Flex布局实现。每种方法都有其独特的实现原理和适用场景：

• 圣杯布局：使用负外边距和相对定位。
• 双飞翼布局：通过浮动布局和负外边距。
• Flex布局：利用弹性盒模型，灵活简单。

根据具体需求选择合适的布局方式，可以有效提高网页的布局效率和兼容性。