likes
comments
collection
share

详解CSS 三栏布局 的七种实现方式

作者站长头像
站长
· 阅读数 38

引言

在网页设计中，布局是至关重要的一环。而三栏布局更是常见的设计之一，今天我们就来探索三栏布局的奥秘之处。

案例引入

假设你正在设计一个网页，需要在页面上展示主要内容、侧边栏、以及其他相关信息。以下图为例：

详解CSS 三栏布局 的七种实现方式

这时候，三栏布局就成了你的首选之一。那么，如何实现一个既美观又实用的三栏布局呢？接下来，让我们一起来看看。

当然除此之外，三栏布局还有一个特点：左右固定宽度，中间自适应。

缩小之后：

详解CSS 三栏布局 的七种实现方式

普通三栏布局

浮动布局

浮动布局是最传统、最常见的实现方式之一。通过设置左右两栏的浮动属性，再清除浮动，使得三栏能够并排显示。尽管简单易懂，但有时会出现高度塌陷等问题。

html部分

<div class="page">
    <div class="left">广告位</div>

    <div class="right">广告位</div>

    <div class="content">主体内容</div>
</div>

css部分

* {
    padding: 0;
    margin: 0;
}

.page {
    height: 200px;
}

.left,
.right {
    width: 200px;
    height: 200px;
    background-color: papayawhip;
}

.left {
    float: left; /*左浮动*/
}

.content {
    height: 200px;
    margin: 0 200px; /*防止内容遮挡*/
    overflow: hidden;
    background-color: rgb(177, 212, 124);
}

.right {
    float: right; /*右浮动*/
}

效果图：

表格布局

表格布局虽然已经不再流行，但它也同样可以实现三栏布局，将每个栏目放置于表格的不同列中。

html部分

    <div class="page">
        <div class="left">广告位</div>

        <div class="content">主体内容</div>

        <div class="right">广告位</div>
    </div>

css部分

* {
    padding: 0;
    margin: 0;
}

.page {
    width: 100vw; /* 宽度为视口的宽度 */
    height: 200px;
    display: table; /* 使用表格布局 */
    table-layout: fixed; /*指定表格的布局为固定布局*/
}

.page>div {
    display: table-cell;  /*设置page内部的div元素为表格单元格布局。*/
}

.left,
.right {
    width: 200px;
    height: 200px;
    background-color: papayawhip;
}

.content {
    width: 100%;
    height: 200px;
    background-color: rgb(177, 212, 124);
}

效果图：

网格布局

网格布局是近年来流行起来的布局方式，通过划分网格来放置不同的栏目，实现精确的布局效果。

html部分

    <div class="page">
        <div class="left">广告位</div>

        <div class="content">主体内容</div>

        <div class="right">广告位</div>
    </div>

css部分

* {
    padding: 0;
    margin: 0;
}

.page {
    width: 100vw; /* 宽度为视口的宽度 */
    height: 200px;
    display: grid; /* 使用网格布局 */
    grid-template-columns: 200px auto 200px; /* 定义三列布局：两侧200px固定宽度，中间自适应 */
}

.left,
.right {
    height: 200px;
    background-color: papayawhip;
}

.content {
    height: 200px;
    background-color: rgb(177, 212, 124);
}

效果图：

进阶三栏布局——实现主体内容（中间栏）优先展示

对于大部分网站，特别是一些新闻网站，主体内容都放在中间栏，而左右两边用来放置一些广告信息。而由于JS是一个单线程的语言，如果使用之前的HTML结构就会产生广告优先展示的情况，这是我们所不希望看到的。

所以关键点在于：我们如何实现将主体内容的html提到最前面，而展示仍位于中间。

定位布局

定位布局是最容易想到的一种，通过设置不同栏目的位置属性，来达到它们的定位效果。

html部分

<div class="page">
    <div class="content">主体内容</div>

    <div class="left">广告位</div>

    <div class="right">广告位</div>
</div>

css部分

step1: 首先设置3个盒子的基础样式：

* {
    padding: 0;
    margin: 0;
}

.page {
    height: 200px;
}

.left,
.right {
    width: 200px;
    height: 200px;
    background-color: papayawhip;
}

.content {
    width: 100%;
    height: 200px;
    background-color: rgb(177, 212, 124);
}

效果图：

详解CSS 三栏布局 的七种实现方式

step2: 给page添加左右padding值，防止左右盒子内容遮挡主体内容。

.page {
    height: 200px;
    padding: 0 200px;
}

效果图：

详解CSS 三栏布局 的七种实现方式

step3: 使用绝对定位，将左右两个盒子放在相应的位置。

.left {
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
}

效果图：

详解CSS 三栏布局 的七种实现方式

圣杯布局

圣杯布局是一种经典的三栏布局方式，通过设置负边距和相对定位来调整布局，使得主体内容优先展示在html文档中的顺序上更靠前。

html部分

<div class="page">
    <div class="content">主体内容</div>

    <div class="left">广告位</div>

    <div class="right">广告位</div>
</div>

css部分

step1: 前两步与定位布局一致，不再赘述：

* {
    padding: 0;
    margin: 0;
}

.page {
    height: 200px;
    padding: 0 200px;
}

.left,
.right {
    width: 200px;
    height: 200px;
    background-color: papayawhip;
}

.content {
    width: 100%;
    height: 200px;
    background-color: rgb(177, 212, 124);
}

效果图：

step2: 给3个盒子都添加浮动，让其在文档流规则中处于同一行（但实际因为中间盒子width: 100%效果图不会有任何变化）,便于之后移动。

.page div {
    float: left;
}

step3: 为left盒子添加margin-left值，使其与content盒子位于同一行。

.left {
    margin-left: -200px; /*与盒子宽一致*/
}

效果图：

详解CSS 三栏布局 的七种实现方式

step4: 将left盒子利用相对定位移至屏幕最左端。

.left {
    margin-left: -200px;
    position: relative;
    left: -100%; /*主体内容盒子宽为100%*/
}

详解CSS 三栏布局 的七种实现方式

step4: 用相同方法，将right盒子移至屏幕最右端。

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

效果图：

详解CSS 三栏布局 的七种实现方式

双飞翼布局

双飞翼布局在圣杯布局的基础上进一步优化，通过使用额外的容器元素和内部浮动元素，使得布局更加灵活，适应性更强。

双飞翼布局与圣杯布局理念最大的不同在于：双飞翼认为既然主体内容自己需要在中间，应该自己塌陷，而不是使外部容器塌陷，所以双飞翼在圣杯布局的基础上添加了一个内部盒子让它自己塌陷（margin），使得布局更加的灵活。

html部分

<div class="page">
    <div class="content">
        <div class="inner">主体内容</div>
    </div>

    <div class="left">广告位</div>

    <div class="right">广告位</div>
</div>

css部分

step1： 前两步与定位布局相似只是将padding值改为margin值并设置在inner盒子上，不再赘述：

* {
    padding: 0;
    margin: 0;
}

.page {
    height: 200px;
}

.left,
.right {
    width: 200px;
    height: 200px;
    background-color: papayawhip;
}

.page>div {
    float: left;
}

.content {
    height: 200px;
    width: 100%;
    background-color: rgb(177, 212, 124);
}

.inner {
    margin: 0 200px; // 内部盒子自己塌陷
    height: 100%;
    background-color: rgb(238, 147, 193);
}

详解CSS 三栏布局 的七种实现方式

step2: 利用margin将left盒子移至屏幕最左端。

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

效果图：

详解CSS 三栏布局 的七种实现方式

step3: 用相同方法，将right盒子移至屏幕最右端

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

效果图：

弹性布局（推荐）

弹性布局则是响应式设计的一部分，通过设置弹性盒子模型中的各种属性，使得布局可以自适应不同屏幕尺寸和设备，展现出更好的用户体验。

核心在于：弹性布局可以通过 order 属性，控制弹性容器中的子项按照一定顺序排列，而不受它们在文档流中的位置影响。

html部分

<div class="page">
    <div class="content">主体内容</div>

    <div class="left">广告位</div>

    <div class="right">广告位</div>
</div>

css部分

css部分非常简单，只需要给page设置弹性布局，并且给3个盒子分别设置order值为0，1，2，即可：

* {
    padding: 0;
    margin: 0;
}

.page {
    height: 200px;
    display: flex;
}

.left,
.right {
    width: 200px;
    background-color: papayawhip;
}

.left {
    order: 0; /*order越小越早展示*/
}

.content {
    flex: 1;
    background-color: rgb(177, 212, 124);
    order: 1;
}

.right {
    order: 2;
}

效果图：

详解CSS 三栏布局 的七种实现方式

结语

在设计网页布局时，灵活运用各种布局方式，可以让页面更加美观、实用，同时也是提升用户体验的重要一步。希望本文对你了解三栏布局有所帮助，也期待你在实践中发现更多有趣的布局方式！

转载自:https://juejin.cn/post/7372080518131613733
评论
请登录