实现三栏布局的8种方式-CFANZ编程社区

文章目录

公共样式
1. 浮动布局
2. 定位布局
3. flex布局
4. 表格布局
5. 网格布局
6. calc函数布局
7. 圣杯布局
8. 双飞翼布局

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

实现三栏布局的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>