likes
comments
collection
share

面试官：如何实现三栏布局？我能写五种方法！（下）

作者站长头像
站长
· 阅读数 30

前言

在上文中我们介绍了三种经典的方法去实现三栏布局，而在本文中我们将介绍更灵活实用的flex布局和grid布局

flex布局

<!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;
            display: flex;
        }

        .left,
        .right {
            width: 200px;
            background-color: #98eea4;
            order: 2;
        }

        .content {
            background-color: #ea8265;
            flex-grow: 1;
            order: 1;
        }
    </style>
</head>

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

我们依旧先在全局清除所有的内外边距。然后我们在.page中提供display: flex;的属性，让它成为一个弹性容器。然后我们依旧将左右侧栏的宽度设置成两百，这里我们增加了 order: 2;样式，这个样式确定了侧栏在布局中的排列顺序，数值越大，排列越靠后。然后我们内容部分添加了order: 1; 确保内容区域在布局中排列在最前面。

Flex布局的内容区域可以自适应宽度并填充剩余空间。Flexbox的flex-grow属性和order属性在布局中起到了关键作用，分别用于自适应宽度分配和元素排序，这体现了Flexbox布局的灵活性和便捷性。

grid布局

<style>
        * {
            margin: 0;
            padding: 0;
        }

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

        

        .left,
        .right {
            height: 200px;
            background-color: #98eea4;
        }

        .content {
            height: 200px;
            background-color: #fedfc5;
        }
    </style>

由于只有CSS样式有差异，这里我就只放上css样式的代码。在这个布局的代码中稍有差异的是我们在.page中使用了 display: grid; 样式，将容器转换为了Grid布局容器。然后用grid-template-columns: 200px auto 200px; 定义了三列的宽度。第一列和第三列固定为200像素宽度，中间的.content为自动调整宽度，会填充剩余空间。我们就不用麻烦的去调整样式。

除了这5种方法外还有没有其他的布局方式呢？ -当然是有的，我们可以自己用定位的方法来实现三栏布局

<style>
7    *{
8        margin: 0;
9        padding: 0;
10    }
11    .page{
12        height: 200px;
13        font-size: 0; /* 用于消除 inline-block 间的空白 */
14    }
15    .item{
16        display: inline-block;
17        vertical-align: top; /* 保证垂直对齐 */
18        font-size: initial; /* 重置内部字体大小 */
19    }
20    .one, .three{
21        width: 200px;
22        height: 100%;
23        background-color: green;
24    }
25    .two{
26        width: calc(100% - 400px); /* 改为相对于父元素宽度计算 */
27        background-color: pink;
28        height: 100%;
29    }
30</style>

在这里我们添加了vertical-align: top;确保所有inline-block元素顶部对齐。在.two中我们将宽度计算方式改为calc(100% - 400px)，这样中间栏的宽度计算基于父元素的百分比宽度，更加灵活且符合预期的三栏布局逻辑。

总结

以上就是我们介绍三栏布局的全部内容了。在这两篇文章中我们介绍了多种三栏布局的方法。以后当面试官让你手搓一个三栏布局的方法时，你能不能想起其中的一种方法呢？如果这篇文章对你有帮助的话，那就留下你的点赞和收藏吧！^_^

转载自:https://juejin.cn/post/7372084329080012810
评论
请登录