面试官：如何实现三栏布局？

站长

2024年06月11日 23:53 · 阅读数 71

一、何为三栏布局？

面试官：如何实现三栏布局？整个页面呈现为左中右三块的布局

并且要求：主体内容优先加载, 左右固定宽度，中间自适应

有三种满足三栏布局所有要求的写法：圣杯布局，双飞翼布局和弹性布局，

另有两种不能满足主体内容优先加载的条件，但实现左中右布局非常的方便的写法：表格布局和网格布局。

二、真三栏布局

1. 圣杯布局（浮动加定位）

代码的执行顺序由上至下，要实现主题内容优先加载，应把主体内容的的代码写在左栏和右栏代码的前面，如下：

<div class="page"> 
    <div class="content">中间栏</div> 
    <div class="left">左侧栏</div> 
    <div class="right">右侧栏</div> 
</div>

对页面进行简单css渲染：

*{
    margin: 0;padding: 0;
}
.page{
    height: 200px;
}
.left, .right{
    height: 200px;
    width: 200px;
    background-color: rgb(21, 15, 193);
}
.content{
    width: 100%;
    height: 200px;
    background-color: rgb(222, 22, 55);
}

content宽度之所以设置100%，是为了满足主体内容占据剩余的宽度，并且自适应。如图：

面试官：如何实现三栏布局？

接下来要对页面进一步的渲染以实现三栏布局，

利用float把元素排列在一行

.page div{
    float: left
}

面试官：如何实现三栏布局？由于content宽度占据100%，所以把left和right元素挤下去了。

如果content宽度可以稍微减小，那么left和right就有希望和content在同一行了，但又要满足左右固定宽度，中间自适应的条件，可以如下操作：

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

将整体页面宽度减少，留出left和right的宽度

面试官：如何实现三栏布局？

之后把left放在相应的位置

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

面试官：如何实现三栏布局？ 代码解释：如果content没有占据整个页面的宽度的话，left和right应该在content的右边，然而，就算content占据了整个页面的宽度，left和right的真实定位也在content右边（只是宽度被content占据，把left和right挤下去了，让你误以为left和right的定位在下一行），因此当margin-left: -200px;时，left以content为参考对象，先向左移动-200px，如下：

面试官：如何实现三栏布局？

再使用position: relative;和left: -100%;以父容器page为参考对象，向左移动父容器100%宽度的距离，就把left放到了对应的位置。

那么对于right的操作也差不多。

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

这样就实现了三栏布局：

面试官：如何实现三栏布局？

这种方法是最典型的布局之一，使用浮动和定位实现的布局方法。

整体css代码：

*{
      margin: 0;padding: 0;
    }
    .page{
      height: 200px;
      padding: 0 200px;
    }
    .left, .right{
      height: 200px;
      width: 200px;
      background-color: rgb(21, 15, 193);
    }
    .page div{
      float: left;
    }
    .content{
      width: 100%;
      height: 200px;
      background-color: rgb(222, 22, 55);
    }
    .left{
      margin-left: -200px;
      position: relative;
      left: -100%;
    }
    .right{
      margin-left: -200px;
      position: relative;
      right: -200px;
    }

2. 双飞翼布局

相比于圣杯布局，这种布局仅仅使用了浮动就完成了三栏布局的效果，更加的优雅，接下来我们来看看究竟是怎么写的。

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

相比于圣杯布局，这种方法则是在主体内容外又裹挟了一层盒子。

进行简单的css渲染：

*{
      margin: 0;
      padding: 0;
}
.page{
      height: 200px;
}
.left, .right{
      height: 200px;
      width: 200px;
      background-color: rgb(23, 20, 211);
}
.content{
      height: 200px;
      background-color: #f11717;
      width: 100%;
}

面试官：如何实现三栏布局？

进一步开始完成三栏布局：

.page > div{
      float: left;
}
.inner{
      background: #1a7458;
      margin: 0 200px;
      height: 100%;
}

.page > div意思是只对第一层的div进行渲染，因此浮动不对inner起作用。

面试官：如何实现三栏布局？

之后对left和right移动：

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

这里的移动逻辑和圣杯布局里的移动逻辑一样，所以不做多解释了

三栏布局效果：面试官：如何实现三栏布局？整体css代码：

*{
      margin: 0;padding: 0;
    }
    .page{
      height: 200px;
    }
    .left, .right{
      height: 200px;
      width: 200px;
      background-color: rgb(23, 20, 211);
    }
    .page > div{
      float: left;
    }
    .content{
      height: 200px;
      background-color: #f11717;
      width: 100%;
    }
    .inner{
        background: #1a7458;
      margin: 0 200px;
      height: 100%;
    }
    .left{
      margin-left: -100%;
    }
    .right{
      margin-left: -200px;
    }

3. 弹性布局

这种布局是最为优雅的布局，那我们来看看究竟如何的优雅。

<div class="page">
    <div class="main">中间栏</div>
    <div class="left">左侧栏</div>
    <div class="right">右侧栏</div>
</div>

html部分相比于圣杯布局没有太大的变化。

进行简单的css渲染:

*{
    margin: 0;
    padding: 0;
}
.page{
    height: 200px;
    display: flex;
}
.left, .right{
    width: 200px;
    background: #1bda34;
}
.content{
    background: #e93a3a;
    flex: 1;
}

使用弹性布局，将子元素排列在一行；
使用flex: 1;将主体内容占据剩余宽度；

面试官：如何实现三栏布局？

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

最关键的地方在于使用了order属性。

order 属性用于设置弹性子元素的排列顺序。它可以是一个整数，也可以是负数，默认值为 0。

当 order 属性的值为正数时，值越小，其子元素排列越前。当 order 属性的值为负数时，值越大，其子元素排列越前。

这里把left设置为0，则排列顺序最前，后面依次排列。

面试官：如何实现三栏布局？

这种方法既容易理解，代码又简单，推荐这种写法。

*{
   margin: 0;
   padding: 0;
}
.page{
   height: 200px;
   display: flex;
}
.left, .right{
   width: 200px;
   background: #1bda34;
}
.content{
   background: #e93a3a;
   flex: 1;
   order: 1;
}
.left{
   order: 0;
}
.right{
   order: 2;
}

三、伪三栏布局

还有两种方法虽然不能满足主体内容优先加载的条件，但也能实现左中右布局的效果，可以借鉴一下。

1.表格布局

<div class="page">
    <div class="left">左</div>
    <div class="main">中间</div>
    <div class="right">右</div>
</div>

布局上没有把中间栏代码放于前面，所以不能实现主体内容优先加载的功能。

先进行简单的css渲染

* {
    margin: 0;
    padding: 0;
}
.page {
    width: 100vw;
    height: 200px;
}
.left,
.right {
    height: 200px;
    width: 200px;
    background-color: blue;
}
.main {
    width: 100%;
    height: 200px;
    background-color: red;
}

面试官：如何实现三栏布局？

.page {
    width: 100vw;
    height: 200px;
    display: table;
    table-layout: fixed;
}

.page>div {
    display: table-cell;
}

display: table;：让元素以表格的特性来呈现；
display: table-cell;：让元素在同一行内排列；
table-layout: fixed;：让列宽由元素自身的宽度决定。

这种布局可以使列对齐

面试官：如何实现三栏布局？

css整体代码：

* {
    margin: 0;
    padding: 0;
}
.page {
    width: 100vw;
    height: 200px;
}
.left,
.right {
    height: 200px;
    width: 200px;
    background-color: blue;
}
.main {
    width: 100%;
    height: 200px;
    background-color: red;
}
.page {
    width: 100vw;
    height: 200px;
    display: table;
    table-layout: fixed;
}

.page>div {
    display: table-cell;
}

2.网格布局

<div class="page">
    <div class="left">左</div>
    <div class="main">中间</div>
    <div class="right">右</div>
</div>

布局没变化

css整体代码

* {
    margin: 0;
    padding: 0;
}

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

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

.main {
    height: 200px;
    background-color: red;
}

我没有对其进行拆分理解，是因为它实在太简单了，就多加了两行代码就实现了布局，实在太快了。

display: grid; ：将元素设置为网格布局模式。
grid-template-columns: 200px auto 200px; ：定义了网格的列模板，有三列，每一列有自定义的宽度。

面试官：如何实现三栏布局？

四、结语

至此关于三栏布局的说明也全部完成，每一种方法都有其特点，学会在特定场景用特定方法解决问题才是我们作为开发者的专业能力，希望对你有所帮助！！！

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

评论

请登录