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

反应热
835 阅读5分钟

前言

在前端开发中，三栏布局是一个常见的需求。这种布局通常包括一个居中的主要内容区域以及左右两侧的辅助内容区域（如侧边栏或广告位），本文将探讨三种不同的方法来实现这种布局，方法分别是圣杯布局，双飞翼布局和Flex布局。

正文

这三种三栏布局的方法都是优先加载内容再加载两侧内容的，我们总不能让两边广告都加载完了，我们的正文内容才出现吧，举个例子：掘金的首页就是一个三栏布局: 修改尺寸.png

下面我们通过代码来实现最简单的三栏布局

方法一：圣杯布局

这种方法依赖于元素的浮动属性以及负margin来达到预期的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
    .page{
        height:200px;
        padding:0 200px;    //给主体内容留出空间
    }
    .page div{
        float:left;
    }
    .content{
        width: 100%;
        height: 200px;
        background-color: red;
    }
    .left{
        height: 200px;
        width: 200px;
        background-color: green;
        /* margin-left: -200px;   //使元素位于主体内容左侧 
        position: relative;
        left:-100%; */
    }
    .right{
        height: 200px;
        width: 200px;
        background-color: blue;
        /* margin-left: -200px;    //使元素位于主体内容右侧 
        position: relative;
        right:-200px; */
    }
</style>
<body>
    <div class="page">
        <div class="content">主体内容</div>
        <div class="left">广告位左</div>
        <div class="right">广告位右</div>
    </div>
</body>
</html>

现在的效果是这样的：

修改尺寸.png

解释：

  • 首先把 .page 设置了padding:0 200px;以确保中间的.content不会被左右两个.left和.right覆盖（因为等会广告位左和广告位右会分别来到内容的左右两边）。
  • 本来，三个div是竖着下来三个对吧，块级元素每个div都占一整行，然后我们把.page div使用float: left;让所有的子div水平排列，但是，因为.content设置为了 width: 100%;，占据了容器所有的宽度，把.left和.right挤下来了，换行到下面来了，也就是现在上面的图片效果。

然后，我们接着操作，在.left加一行代码margin-left: -200px；,其余代码不动，这样就可以把绿色部分拿上来：

.left{
        height: 200px;
        width: 200px;
        background-color: green;
        margin-left: -200px;
    }

效果为：

修改尺寸.png 解释：: margin-left: -200px;,当.left设置了这个后绿色部分会往左边移动对吧，它是因为红色部分占满而被挤下来的对吧，它的最左边是不是相当于挨着红色的最右边，所有当它往左移动时，就会先换行到上面去，往左边移动200px，把红色内容盖住了200px,也就是现在上面的效果。

接着，我们，在.left再两行加一行代码position: relative;left:-100%; ，其余代码不动，这样就会把绿色的部分放到最左边了：

   .left{
        height: 200px;
        width: 200px;
        background-color: green;
        margin-left: -200px;
        position: relative;
        left:-100%; 
    }

效果为：

修改尺寸.png 解释：:通过position: relative;和left:-100%; ,绿色部分相对自己定位向左移动父容器宽度的100%,因为用的是%,所有往用的是父容器的宽度，而父容器又是标准盒模型，它的宽就是红色部分的宽度，所有刚好就移动到了上面图片的位置。

最后,蓝色部分跟绿色的原理一模一样，就是移动的距离不一样,通过right:-200px; ，往右移动200px,完整的代码就在最上面，把代码中的/* */去掉就好了。 最终效果为：

修改尺寸.png

方法二：双飞翼布局

第二种方法同样利用了浮动，但通过嵌套一个内部容器来解决内容重叠的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three Column Layout with Nested Element and Negative Margins</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
        }
        .page > div {
            float: left;
        }
        .content {
            width: 100%;
            height: 200px;
            background-color: red;
        }
        .left {
            height: 200px;
            width: 200px;
            background-color: green;
           /* margin-left: -100%; */     /* 使左侧元素位于主体内容左侧 */
        }
        .right {
            height: 200px;
            width: 200px;
            background-color: blue;
           /* margin-left: -200px; */     /* 使右侧元素位于主体内容右侧 */
        }
        .inner {
            margin: 0 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>

效果如下：

修改尺寸.png 解释：：跟圣杯布局一样的绿色和蓝色的部分被挤下来了，这里我们通过在.content里面加了一个.inner,并给其加上了margin: 0 200px;把主体内容放到了中间，避免里面的内容被覆盖。

然后我们现在把绿色和蓝色放上去就好了，代码如下：

.left{
        height: 200px;
        width: 200px;
        background-color: green;
        margin-left: -100%;
    }
    .right{
        height: 200px;
        width: 200px;
        background-color: blue;
        margin-left: -200px;
    }

解释：通过margin-left: -100%;和margin-left: -200px;分别把绿色和蓝色部分移至到主体内容的左右两边，就实现了跟上面一样的效果：

image.png

方法三：使用 Flexbox

Flexbox 提供了一种更现代、更简洁的方式来创建响应式布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
    .page{
        height:200px;
        display: flex;
    }

    .content{
        flex:1;
        height: 200px;
        background-color: red;
        /* order:1; */
    }
    .left{
        height: 200px;
        width: 200px;
        background-color: green;
       /* order:0; */
    }
    .right{
        height: 200px;
        width: 200px;
        background-color: blue;
        /* order:2; */
    }
</style>
<body>
    <div class="page">
        <div class="content">主体内容</div>
        <div class="left">广告位左</div>
        <div class="right">广告位右</div>
    </div>
</body>
</html>

解释：：首先.page*使用了display: flex;来创建一个弹性容器，把内容都放到了同一行，然后左右两边的部分都设置了宽度，把中间内容设置为了flex:1让其可以扩大占据剩余所有位置，按上面代码的效果为：

修改尺寸.png 可以看到他们是按照代码的执行顺序来排列的，然后我们通过给它们加上order这个属性，就是把上面代码的/* */去掉，order属性上面数字越小的越排在前面，但是代码执行还是主体内容优先加载，是不影响的。修改后我们看看效果：

image.png 可以看到确实如此。

结论

以上就是关于三栏布局三种方法的总结了。希望对你有所帮助！，感谢你的阅读！帮忙点点赞呗，非常感谢大家！

avatar
文章
阅读
粉丝