初生牛犊不怕虎的我，轻蔑的一问：三栏布局不是很简单吗？

站长

2024年07月29日 05:27 · 阅读数 20

什么是三栏布局

在没有认真看三栏布局时我就认为三栏布局就是将用户屏幕分为三部分，分别显示不同的内容。但是学习了三栏布局后，我才知道，三栏布局中间一栏才是主角，需要最先加载出来。而且两边的两栏它的宽度是固定的，中间的宽度需要自适应。

初生牛犊不怕虎的我，轻蔑的一问：三栏布局不是很简单吗？

这是我实现的一个假的三栏布局，因为它并没有实现主角部分优先加载。

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

我们要实现主角部分优先加载就得将它的html结构往前提，这样才能优先加载主要内容部分。嗯，所以说三栏布局并没有我想的那么简单。下面我就给大家分享一下三栏布局的几种常见的方式

圣杯布局

嗯，对的，就叫圣杯布局，最初的出处是Matthew Levine 2006年 1月30日在In Search of the Holy Grail 这篇文章中提出来的。通过看一些资料，我认为叫圣杯是因为它和圣杯一样重要吧！大家有什么看法呢？快来评论区交流交流吧！

首先我们先做一个基础的html结构，然后再做一点样式方便区分。然后设置浮动使元素都在同一行，然后再设置主要内容的宽为100%，确保他可以自适应宽度。

     <style>
        *{
        margin: 0;
        padding: 0;  
        }
       .page{
        height: 200px;
        padding: 0 200px;
       }
       .left,.right{
        width: 200px;
        height: 200px;
        background-color: lightblue;
       }
       .content{
        height: 200px;
        background:yellow;
       }
       .page div{
        float: left;
       }
       .content{
        width: 100%;
       }
    </style>
<body>
    <div class="page">
        <div class="content">内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>

最后我们可以得到这样的效果：因为我们设置了content 的宽为100%，就将后面的两个元素都挤到另一行去了，导致不在同一行。但是我们应该要清楚下面的两个广告位应该是要接在最后面的。

初生牛犊不怕虎的我，轻蔑的一问：三栏布局不是很简单吗？

所以我们现在就需要将下面的两个元素移到它相应的位置上去。应该怎么做呢？我们可以移动left元素，让他据左边的为-200px，就移到图示的位置了。为了让其回到左边位置

初生牛犊不怕虎的我，轻蔑的一问：三栏布局不是很简单吗？

为了让其回到左边位置，我们设置它为相对定位让其能够移动，然后使用left属性，让其向左移动到相应的位置。具体设置如下：

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

右边的元素也可以向左元素类似的方式进行移动到相应的位置。当然我们可以用一个更简单的方法，直接margin-right: -200px;让其到应该在的位置。其实这也不难理解，因为当左元素移走后，右边的元素顺理成章就替代它的位置，margin-right: -200px;就是将其右边距设置为-200px，将其往左边挤。就移动到了它该在的位置。最后的结果图就如最上面的图所示！

双飞翼布局

双飞翼布局之所以被称为“双飞翼”，是因为它可以形象地比喻为一只鸟的两个翅膀，而中间的内容区域则像是鸟的身体。这种比喻有助于理解布局的结构和工作原理。双飞翼布局是一个前无古人后无来者创造出来的一种布局，玉伯。大家感兴趣的可以去了解了解这位大佬！

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

双飞翼布局与圣杯布局有点不同，就是圣杯用padding属性为广告位腾出位置，而双飞翼则是通过margin，通过设置inner的margin，来控制位置。其他的与圣杯布局没有啥区别，就是移动相应的位置就行了。大家看看这个具体的代码，如果上面的理解了，这双飞翼也就好理解了。

      <style>
        *{
            margin: 0;
            padding: 0;
        }
       .page{
        height: 200px;
       }
       .left,.right{
        width: 200px;
        height: 200px;
        background: green;
       }
       .content{
        height: 200px;
        background: yellow;
        width: 100%;
       }
       .inner{
        margin:0 200px;
        height: 100%;
       }
       .page > div{  /*只会选择子集，不会孙子极*/
        float: left;
       }
       .left{
        margin-left: -100%;
       }
       .right{
        margin-left: -200px;
       }
    </style>

效果图还是一样的，就不过多的展示了。

弹性布局

你们看到这里，恭喜你们终于可以舒服一下了，因为实现三栏布局使用弹性布局的方法很简单，我觉得我都不用说什么，在上面两个布局移来移去真的有点晕头晕脑的！直接将Page设置成弹性布局，然后给他排个序就好了。

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

    <style>
        *{
            margin: 0;
            padding: 0;     
        }
       .page{
            height: 200px;
       }
       .left,.right{
            width: 200px;
            height: 200px;
            background-color: lightblue;
       }
       .content{
        height: 200px;
        background:yellow;
       }
       .content{
        width: 100%;
       }
       .page{
        display: flex;
       }
       .content{
        flex: 1;
        /* order: 1; */
       }
       .right{
        /* order: 2; */
       }       
    </style>

大家可以看看注释后的这个效果，

初生牛犊不怕虎的我，轻蔑的一问：三栏布局不是很简单吗？

逐步放开这个注释order: 1; order: 1;表示content排在了第二位，最后出现了这样的效果。

初生牛犊不怕虎的我，轻蔑的一问：三栏布局不是很简单吗？

最后再放开 order: 2;，表示将right放到第三位，也就是最后面。这样就可以实现我们想要的三栏布局。大家不信的话可以去试试。是不是很舒服，这一下就出来了，都不用移来移去！

表格布局

表格布局其实是html4里面的内容，现在也很少使用了，不过还是讲讲吧。我个人觉得它并不能成为真正的三栏布局，因为他不能实现主要内容优先加载。它的具体实现如下：

<!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{
        height: 200px;
   }
   .left,.right{
        width: 200px;
        height: 200px;
        background-color: lightblue;
   }
   .content{
    height: 200px;
    background:yellow;
   }
   .page{
    display: table;
    table-layout: fixed;  /* 让容器宽度由子容器自己决定 */
    width: 100%;
   }
   .page>div{
    display: table-cell; /* 设置wield表格单元 */
   }
   .content{
    width: 100%;  /*只会占据父容器的100%*/
   }
    </style>
</head>
<body>
    <div class="page">        
        <div class="left">广告位</div>
        <div class="content">内容</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

尽管 .content 的宽度设置为 100%，但在表格显示模式中，.content 实际上只能占据剩余的空间。这是因为左右栏已经占用了部分宽度，所以 .content 实际上占据的是 .page 宽度减去左右栏宽度后的剩余空间。

优雅是比较优雅的，但是比起真正的三栏布局，还是少了最核心的一点，这也许就是遗憾吧！与表格布局有一样遗憾的还有网格布局。

网格布局

网格布局通过定义一组行和列来创建一个网格容器，每个网格项（grid item）都可以放置在这个网格中。网格布局提供了高度灵活的布局选项，使得元素可以跨越多行或多列，同时还可以根据屏幕尺寸的变化自动调整布局。我们想通过网格布局来实现三栏布局的效果，直接在最基础的样式上，设置个网格布局，如下所示：

.page{
    display: grid;
    grid-template-columns: 200px auto 200px ;
   }

grid-template-columns: 200px auto 200px ;是用来设置网格布局的列模版，分别表示每列的宽度。对，这就结束了，就这么简单！是不是还没反应过来。网格布局提供了一种强大且灵活的方式来创建复杂且响应式的布局。它非常适合需要精确控制元素位置和大小的场景，特别是在创建多列布局时。通过简单的几个属性设置，即可实现复杂的布局效果。实现一个小小的三栏布局还是有点牛刀杀鸡的感觉，例如我们常见的九宫格等这些布局都可以通过网格布局快速的实现。

所以，你要实现这个页面用网格布局该怎么做呢？

初生牛犊不怕虎的我，轻蔑的一问：三栏布局不是很简单吗？大佬们可以在评论区给出答案哟！大家可以去看看网格布局的一些属性，这些间隙怎么做！

总结

对于三栏布局我们现在最常用的肯定就是弹性布局来实现了，但是圣杯布局和双飞翼等这些布局也需要稍微了解一下哟，因为里面的一些css知识我感觉还是挺有用的！搞清楚里面的移来移去，对以后页面的布局还是挺有用的。还有网格布局应用范围也挺广的，对于那种多行多列的布局用这个还是很不错的！

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