三栏布局：打造你想要的网页体验！

最近好乐
2,026 阅读5分钟

前言：

什么是三栏布局？ 就是主题内容优先加载,左右固定宽度，中间自适应。简单的说就是当我们打开一个网站的时候，这个页面的主题内容会优先加载出来，两边的内容后面加载。

在掘金上写了这么多的文章，咱们有没有注意到掘金网站上首页的布局呢，它就是一个三栏布局。

image-20240524161407021.png

小伙伴们有没有想过自己动手实现一个三栏布局呢？

如果咱们的html结构是这样的：

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

那咱们有很多种办法来调整他们的位置来实现三栏布局，可是这样的话根据代码从上往下的执行顺序在加载网页时它会让左边的left广告位的内容优先加载，并不会先加载中间的主题内容，就没有达到咱们想要的效果，有的小伙伴说那就换个位置把主题内容放在第一个：

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

这样它确实会优先加载，可是它在屏幕上的位置在最左边呀，这时候又该如何解决呢？接下来小编我给大家分享5种实现三栏布局的方法。

方法一：圣杯布局

这种布局的特点是两侧边栏和中间内容区在同一水平线上，并且在窗口大小变化时，布局依旧能够保持美观和功能性。

基础的css样式：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
             //padding: 0 200px;/*四个属性 上右下左 */
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: aqua;
        }
        .content{
        width: 100%;
        height: 200px;
        background-color: tomato;
        }

效果如下：

image-20240524164218654.png

可以看到主题内容占满了一整行，这时候咱们就要设置page的内边距： padding: 0 200px;留出左右两边空白的位置。

image-20240524164539013.png

同时我们还需要给这两个广告位设置float属性，让page里的div元素浮动起来，不会因为content主题内容宽度为100%而被挤到第二行去

.page **div** { float: left; }

image-20240524164950174.png 这时候咱们就得想办法移动这两个广告位的位置，让他们分别去到主题内容的左右两边。

对于left,咱们可以移到父容器位置的-200px位置，并且要相对于page容器-100%的位置。

对于right,只需要相对于右边移动-200px的位置即可。

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

最后咱们来看看效果：

image-20240524165733516.png

nice！这就是咱们想要的三栏布局，也叫圣杯布局。

方法二：双飞翼布局

这种布局是在content容器里在嵌套一个inner盒子用于存放主题内容，然后设置inner容器与content容器的左右外边距正好为两个广告位容器的宽度，用于放置广告位。

html:

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

image-20240524173401071.png

对于left,使用负边距margin-left将它移动父容器的100%距离，同理右容器也是移动200px.

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

来看效果：

image-20240524173728265.png

nice!通过将left和right覆盖在content上双飞翼布局同样实现了咱们想要的三栏布局。

方法三：flex布局

这种布局方式主要是通过将父容器page设置为弹性容器，display: flex。将中间容器content的 flex-grow 属性设置为 1，自动为其分配空间。然后再使用 order 属性改变元素容器出现的顺序。数字越小排放的顺序越前，默认情况下，元素的出现排放顺序是按照 HTML 中从下往下的顺序排列的。为1，可以通过修改 order 属性来改变元素排放的顺序。

    .content {
      flex: 1;
      order: 1; 
      background: red;
    }
    .left {
      order: 0;
    }
    .right {
      order: 2;
    }

来看看效果：

image-20240524174845418.png

优雅！同样也可以实现三栏布局，这是我感觉最优雅的三栏布局方式。

方法四：table布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            width: 100vw;
            height: 200px;
            display: table;
            table-layout: fixed;
        }
        .page > div{
            display: table-cell;
        }
        .left,.right {
            height: 200px;
            width: 200px;
            background: greenyellow;
        }
        .content {
            width: 100%;
            height: 200px;
            background-color:yellow ;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="left">广告位</div>
        <div class="content">主体内容</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

  • display: table;: 此属性将元素的显示模式设置为表格（table）。这意味着该元素及其内部子元素会像HTML表格那样表现，尽管它们可能并非<table>、<tr>、<td>这样的标签。这有助于实现某些特定的布局需求，比如水平等宽布局。

  • table-layout: fixed;: 当元素以表格形式显示时，这个属性控制表格的布局算法。fixed值意味着列宽由首个单元格决定，或者是显式设定的宽度，这使得布局更快并且不会受到表格内容的影响。换句话说，即使表格内容改变，列宽也不会自动调整。

    来看效果：

image-20240524175435770.png

同样也可以实现。

方法五：grid网格布局

基本代码都不变，主要是在page上，

.page {
            width: 100vw;
            height: 200px;
            display: grid;
            grid-template-columns: 200px auto 200px;
        }

  • display: grid;: 这一行声明该元素应该作为一个网格容器来显示，开启了CSS Grid布局模式。

  • grid-template-columns: 200px auto 200px;: 这个属性定义了网格布局中列的宽度。具体来说：

    第一列宽度固定为200px。

    第二列的宽度为auto，这意味着它会自动调整宽度以占据除了第一列和第三列之外的剩余空间。在Grid布局中，auto通常会使该列成为弹性列，能够自适应填充剩余空间。

    第三列同样宽度固定为200px。

来看看效果：

image-20240524175916611.png

nice!也可以实现三栏布局的效果，这种布局适合创建具有固定侧边栏和一个流动主要内容区域的页面布局，并且相对于圣杯布局，它更加简洁，无需使用负边距或浮动。

好啦！这就是我给大家介绍的五种三栏布局方式，屏幕前的你是否还有其他方法呢？欢迎评论区留言交流。

avatar
文章
阅读
粉丝