实现三栏布局的8种方式

文章目录

三栏布局：两侧宽度固定，中间宽度自适应的

在这里插入图片描述

公共样式

* {
    padding: 0;
    margin: 0;
    height: 100%;
}

.left {
    width: 200px;
    background-color: aqua;
}

.right {
    width: 200px;
    background-color: burlywood;
}

.main {
    background-color: chartreuse;
}

1. 浮动布局

左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应

  • 优点：简单易懂
  • 缺点：主要内容无法最先加载，当页面内容较多时会影响用户体验
<body>
    <style>
        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .main {
            margin: 0 200px;
        }
    </style>
    
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="main">Main</div>
</body>

2. 定位布局

  • 优点：简单易懂，并且主要内容可以优先加载
  • 缺点：容器脱离了文档流，高度未知的时候，会有问题
<body>
    <style>
        .left,
        .right {
            position: absolute;
            top: 0;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .main {
            margin: 0 200px;
        }
    </style>

    <!-- 可以把Main提前，使主要内容可以优先加载 -->
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</body>

3. flex布局

  • 优点：简单实用，未来的趋势
  • 缺点：需要考虑浏览器的兼容性
<body>
    <style>
        .container {
            display: flex;
        }

        .main {
            flex: 1;
            /* flex: 1 1 auto; */
        }
    </style>

    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>

4. 表格布局

  • 优点：兼容性很好，当内容溢出时会自动撑开父元素
  • 缺点：seo不友好
<body>
    <style>
        .container {
            display: table;
            width: 100%;
        }

        .container>div {
            display: table-cell;
        }
    </style>

    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>

5. 网格布局

  • 优点：CSS新标准，创建网格布局最强大和最简单的工具，可以将页面分成具有简单属性的行和列
  • 缺点：有兼容性问题
<body>
    <style>
        .container {
            display: grid;
            width: 100%;
            grid-template-columns: 200px auto 200px;
        }
    </style>

    <div class="container">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
</body>

6. calc函数布局

  • 优点：计算出main的宽度，简单粗暴
  • 缺点：css3属性有兼容性问题
  • 注意：calc() 的使用注意点： 运算符前后都需要保留一个空格
    width: calc(100%-400px); 这样“-”号后面没有空格是错误的
<style>
    .container {
        width: 100%;
    }
    .container>div {
        float: left;
    }
    .main {
        width: calc(100% - 400px);
    }
</style>
<div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</div>

7. 圣杯布局

利用的是浮动元素 margin 负值的应用

  • 优点：主体内容可以优先加载
  • 缺点：CSS理解起来难一点
<body>
    <style>
        body {
            margin: 0 200px;
        }

        div {
            float: left;
        }

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

        .right {
            margin-right: -200px;
        }

        .main {
            width: 100%;
        }
    </style>

    <!-- 注意顺序 -->
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</body>

8. 双飞翼布局

与圣杯布局很像，但多了一层div嵌套

  • 优点：主体内容可以优先加载
  • 缺点：HTML 代码结构稍微复杂点。
<body>
    <style>
        body>div {
            float: left;
        }

        .left {
            margin-left: -100%;
        }

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

        .main {
            width: 100%;
        }

        .inner {
            margin: 0 200px;
        }
    </style>

    <div class="main">
        <div class="inner">
            Main
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</body>
posted @ 2022-07-20 18:15  猫老板的豆  阅读(93)  评论(0)    收藏  举报