三栏布局的各种实现方法及优缺点在网页布局中，三栏布局是一种常见的布局方式，即左右两侧栏固定宽度，中间内容区域自适应宽度。

站长

2024年09月28日 15:00 · 阅读数 21

在网页布局中，三栏布局是一种常见的布局方式，即左右两侧栏固定宽度，中间内容区域自适应宽度。这种布局通常用于网站的结构设计，其中主要内容通常优先加载，以提高用户体验和SEO效果。本文将介绍几种实现三栏布局的方法，包括圣杯布局、双飞翼布局、弹性布局、表格布局、网格布局和定位布局，详细讲解它们的实现方式和各自的优缺点。

一、圣杯布局

圣杯布局是一种经典的三栏布局方式，它通过CSS浮动和负边距来实现。圣杯布局的特点是中间内容区域优先加载，两侧固定宽度的栏位不会影响中间区域的自适应宽度。

实现代码：

我们先写一些最基本的html和css样式，使各部分可视化。因为主要内容要优先加载，所以主要内容的html结构放在前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background: #55d153;
        }
        .content{
            height: 200px;
            width: 100%;
            background: #e792e2;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位left</div>
        <div class="right">广告位right</div>
    </div>
</body>
</html>

三栏布局的各种实现方法及优缺点在网页布局中，三栏布局是一种常见的布局方式，即左右两侧栏固定宽度，中间内容区域自适应宽度。然后让所有子div左浮动，这是创建水平布局的基础

        .page div{
           float: left;
        }

接着是圣杯布局非常关键的一步，设置.page内边距，给甲方爸爸留下位置，因为这里广告位宽度为200px，所以左右内边距我们也设为200px

        .page{
            padding: 0 200px;
        }

三栏布局的各种实现方法及优缺点在网页布局中，三栏布局是一种常见的布局方式，即左右两侧栏固定宽度，中间内容区域自适应宽度。最后我们调整左右侧栏位置使其覆盖掉预先留好的位置

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

三栏布局的各种实现方法及优缺点在网页布局中，三栏布局是一种常见的布局方式，即左右两侧栏固定宽度，中间内容区域自适应宽度。

二、双飞翼布局

双飞翼布局是圣杯布局的改进版，它解决了圣杯布局中对.content区域设置宽度的问题。双飞翼布局将内容区域包裹在一个内层容器中，实现了更灵活的布局。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
        }
        .left, .right {
            width: 200px;
            height: 200px;
            background: #11c470;
        }
        .content {
            height: 200px;
            background: #f1467c;
            width: 100%;
        }
        .inner {
            margin: 0 200px;
            height: 100%;
        }
        .page > div {
            float: left;
        }
        .left {
            margin-left: -100%;
        }
        .right {
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">
            <div class="inner">主要内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

在双飞翼布局中，.content容器中还加了一个.inner容器，通过设置.inner的左右外边距margin实现中间区域的自适应宽度以及留出左右侧边栏位置，其他和圣杯布局大差不差。要特别注意设置浮动时，要用.page > div只选中子集，而不会选中孙集和后代。

三、弹性布局

弹性布局（Flexbox）是一种现代的布局方式，通过设置父容器的display: flex，可以轻松实现三栏布局，并且具有很好的响应性。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            display: flex;
        }
        .left, .right {
            height: 200px;
            width: 200px;
            background: #16bf13;
        }
        .content {
            height: 200px;
            background: #be11b2;
            flex: 1;
            order: 1;
        }
        .right {
            order: 2;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

在弹性布局中，通过设置.page为display: flex，并使用order属性控制元素的顺序，实现了中间内容优先加载的效果，相比前两种圣杯布局和双飞翼布局是不是简单易懂许多呢，这也是我最喜欢用的方式。

四、表格布局

表格布局使用display: table和display: table-cell来实现三栏布局。虽然实现简单，但无法保证主要内容优先加载。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            width: 100%;
            display: table;
            table-layout: fixed;
        }
        .page > div {
            display: table-cell;
        }
        .left, .right {
            height: 200px;
            width: 200px;
            background: #16bf13;
        }
        .content {
            height: 200px;
            background: #be11b2;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="left">广告位</div>
        <div class="content">主要内容</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

在表格布局中，.page容器设置为display: table，内部元素设置为display: table-cell，实现了横向排列。

五、网格布局

网格布局（Grid）是另一种现代布局方式，通过display: grid和grid-template-columns可以轻松实现三栏布局，但无法保证主要内容优先加载。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            width: 100%;
            display: grid;
            grid-template-columns: 200px auto 200px;
        }
        .left, .right {
            height: 200px;
            width: 200px;
            background: #16bf13;
        }
        .content {
            height: 200px;
            background: #be11b2;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="left">广告位</div>
        <div class="content">主要内容</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

在网格布局中，通过设置.page为display: grid并定义grid-template-columns，可以轻松实现左右栏固定、中间栏自适应的布局。网格布局强大且灵活，适用于复杂布局的实现。

六、定位布局

定位布局是通过使用CSS的position属性来实现的，可以精确控制元素的位置，但这种方法通常不是首选，因为它会导致布局的维护变得更加复杂。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            width: 100%;
            position: relative;
        }
        .left, .right {
            height: 200px;
            width: 200px;
            position: absolute;
            top: 0;
        }
        .left {
            left: 0;
            background: #16bf13;
        }
        .right {
            right: 0;
            background: #16bf13;
        }
        .content {
            margin: 0 200px;
            height: 200px;
            background: #be11b2;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="left">广告位</div>
        <div class="content">主要内容</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

在定位布局中，左右栏使用position: absolute定位，使其固定在页面的两侧。中间内容区域使用外边距调整位置，实现自适应宽度。

总结

本文介绍了实现三栏布局的几种常见方法，并对每种方法的实现方式和特点进行了讨论。

圣杯布局和双飞翼布局：利用CSS浮动和负边距技术，主要内容优先加载。
弹性布局：使用Flexbox，简单易用，支持响应式设计。
表格布局和网格布局：通过CSS表格和网格技术实现，适合复杂布局，但主要内容无法优先加载。
定位布局：通过CSS定位实现，适用于精确控制元素位置的场景。

每种布局方式都有其优缺点，选择时应根据具体需求和场景进行权衡。在现代网页设计中，Flexbox和Grid是最为推荐的布局方式，具有高度的灵活性和强大的功能。希望通过本文的讲解，能够帮助你更好地理解和应用三栏布局。

转载自:https://juejin.cn/post/7415914111861768255