三栏布局：优先呈现主体，打造引人入胜的网页体验

呆同学
275 阅读5分钟

引言

在网页设计的世界里，布局是至关重要的。一个良好的布局可以为用户提供清晰的导航，优化阅读体验，甚至增强品牌形象。在众多的布局方式中，三栏布局因其灵活性和实用性而备受推崇。

三栏布局，顾名思义就是将页面内容通过左侧栏、中间栏、右侧栏三部分呈现，比如掘金首页：

image.png

然而，随着对用户体验的不断追求，我们也开始思考如何优化布局，使主体内容能够更快地呈现给用户。

在HTML中，浏览器会按照代码的顺序逐行解析和加载内容。因此，如果你希望主体内容内容（例如中间栏）优先加载，可以将该内容的代码放在HTML文件的前面位置。这样，在浏览器解析HTML时，会优先加载这部分内容，提高用户体验。如下：

<div class="page">
        <div class="content">主体内容</div>
        <div class="left">左侧栏</div>
        <div class="right">右侧栏</div>
    </div>

但我们想要主体内容在中间栏呈现，这就需要我们通过三栏布局来实现了。实现的方式有很多，接下来呆同学将通过一个简单例子来分享给大家。

先设置好公共的css样式：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .page {
            height: 200px;
        }

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

        .content {
            height: 200px;
            width: 100%;
            background-color: pink;
        }
    </style>

效果图：

image.png

圣杯布局

圣杯布局是一种经典的三栏布局，它通过使用负边距和浮动来实现。

①. 首先我们给page下的三个div标签设置为浮动，这样三栏就会因为浮动而处在同一行，但由于我们给content设置了宽为100%，因此会将左右栏挤在下一行。如下：

.page > div {
            float: left;
        }

image.png

②. 然后给page设置内边距为padding:0 200px，目的是为左、右栏预留出宽度。如下：

image.png

③. 最后结合相对定位，通过给左、右栏设置负外边距来使得它们正好能够在呈现主体内容的左右部分。如下：

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

image.png

这便是圣杯布局，它通过给左、右栏设置负边距和浮动以及相对定位来实现。

双飞翼布局

双飞翼布局是另一种经典的三栏布局，它与圣杯布局类似，但在解决一些布局问题时更加简洁。双飞翼布局的核心思想是将中间内容放在最前面加载，并通过负边距和外层容器的填充实现左右两侧栏的位置调整。

①. 首先得先给conten容器内新增一个inner容器，用来展示主体内容。

<div class="page">
        <div class="content">
            <div class="inner">主体内容</div>
        </div>
        <div class="left">左侧栏</div>
        <div class="right">右侧栏</div>
    </div>

②. 和圣杯布局类似，将page下div设置为浮动，但同时给inner容器设置外边距margin: 0 200px。如下：

.page > div {
            float: left;
        }
.inner {
            height: 100%;
            margin: 0 200px;
            background-color: red;
        }

image.png

③. 最后给左、右栏设置负外边距。如下：

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

image.png

以上便是双飞翼布局，和圣杯布局类似，但又有不同，它是让左、右栏覆盖在了content上。

grid 布局

grid 布局也同样可以实现三栏式布局，如果没有要求优先加载主体内容的话，grid 其实极其的便利。

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            width: 100vw;
            display: grid;
            grid-template-columns: 200px auto 200px;
        }
        .left, .right {
            height: 200px;
            background-color: aquamarine;
        }
        .content {
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="left">左广告位</div>
        <div class="content">主体内容</div>
        <div class="right">右广告位</div>
    </div>
</body>

只需要grid-template-columns: 200px auto 200px;这一行代码足以~

但这并不是我想要的，因为conten这个div并不是第一个加载，所以我得这样做：

* {
            margin: 0;
            padding: 0;
        }

        .page {
            height: 200px;
            display: grid;
            grid-template-columns: 200px auto 200px;
            grid-template-areas: "left content right";
        }

        .left {
            background-color: aquamarine;
            grid-area: left;
        }

        .right {
            background-color: aquamarine;
            grid-area: right;
        }

        .content {
            background-color: pink;
            grid-area: content;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="content">主体内容</div>
        <div class="left">左侧栏</div>
        <div class="right">右侧栏</div>
    </div>
</body>

image.png

flex 布局

felx布局功能强大，相比前面几种方式，flex布局，不仅可以大大简化代码，减少了对浮动、定位等技巧的需求，使布局结构更加清晰和易于理解。可以通过调整子元素的排序（使用 order 属性）来实现三栏布局，从而实现主体内容优先加载，确保重要内容优先显示，提升用户体验。

flex弹性布局具体知识可以查看我之前的文章：带你了解flex弹性布局

①. 首先给page设置为弹性容器，且无需设置宽度，同时设置content的flex属性值为1，让content容器自适应宽度。如下：

.page {
          height: 200px;
          display: flex;
     }
.content {
            flex: 1;
            background-color: pink;
        }

image.png

②. 给左侧栏order属性值设置为-1，让主体内容呈现在中间。（这里有多种方式，也可以分别设置左、中、右栏的order属性值分别为0、1、2）如下：

.left {
            order: -1;
        }

image.png

以上便是flex布局实现的三栏布局，只需要通过order属性值来改变位置，何其优雅~

总结

好的，今天呆同学分享了几种常见的三栏布局方法，包括圣杯布局、双飞翼布局、Grid布局和Flex布局。在圣杯布局和双飞翼布局中，我们使用负边距和浮动来实现三栏布局，同时确保主体内容优先加载。在Grid布局中，我们使用 grid-template-areas 属性灵活地定义了布局结构，可以根据需要调整元素的位置。最后，在Flex布局中，我们利用了Flexbox模型的强大功能，通过设置 order 属性调整了左侧栏的显示顺序。

呆同学觉得无论是哪种方法，三栏布局都可以通过适当的HTML结构和CSS样式实现，从而创建出具有良好可读性和可维护性的网页布局。每种方法都有其优势和适用场景，可以根据具体需求选择合适的布局方式。

希望大家能够学到知识，同时别忘了点赞收藏+关注哦~

avatar
文章
阅读
粉丝