三栏布局，到底哪种最好用呢

站长

2024年07月30日 21:35 · 阅读数 20

想必在前端奋战的大伙们都知道三栏布局，它有各种各样的实现方法，那么我们又该如何选择呢？其实它们都大差不差，选择哪一个纯看自己心情，哪个简单用哪个呗。

三栏布局

三栏布局，到底哪种最好用呢

三个栏：左边菜单、中间文章、右边堆一些其他关键的模块。

三栏布局的关键

必须让主要内容的加载优先于侧栏内容的加载。不然你让用户先看广告？好好好，你是懂盈利的。
左右固定，中间自适应：页面的整个宽我们是不能保证它的大小的，所以我们不能把它们的宽度写死，这里需要把左右两栏固定大小，让主要内容自适应。

各种实现方式

圣杯布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            padding: 0 200px;
        }
        .left,.right {
            height: 200px;
            width: 200px;
            background: #1adc20;
        }
        .content {
            width: 100%;
            background:yellow;
            height: 100%;
        }
        .page div{
            float: left;
        }
        .left{
            margin-left:-200px;
            position: relative;
            left:-100%;
        }
        .right{
            margin-right: -200px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

通过 float 属性使所有栏浮动，然后利用负边距使左右两栏“挤”进中间栏的空间，从而实现固定宽度而不影响中间栏内容。至于为什么叫这个名呢，我也很知道...

双飞翼布局：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .page {
            height: 200px;
        }
        .left,
        .right {
            width: 200px;
            height: 200px;
            background: greenyellow;
        }
        .content{
            height: 100%;
            background:pink;
            width: 100%;
        }
        .inner{
            margin:0 200px;
            height: 100%;
        }
        .page>div{
            float: left;
        }
        .left{
            margin-left:-100%;
        }
        .right{
            margin-left: -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>

在中间栏内部嵌套另一个 div，通过设置嵌套元素的 margin来实现与左右两栏的对齐，而中间栏本身保持100%宽度。

弹性布局：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            font-size: 0;
            display: flex;
        }
        .left,
        .right {
            height: 200px;
            width: 200px;
            background: #1adc20;
        }
        .content {
            height: 200px;
            background: #dfef04;
            width: calc(100vw - 400px);
            flex:1;
            order:1;
        }
        .page div{
            display: inline-block;
            font-size:20px;
        }
        .right{
            order:2;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

运用CSS中的 order属性指定容器内元素的排列顺序。

结语

这三种就是常见的三栏布局的实现方式，实现起来其实很简单，但就是细节不能丢了。布局设计不仅关乎美学，更是用户体验和信息架构的重要组成部分。

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