CSS：实现自适应三栏布局的方法及双飞翼和圣杯布局的区别

最新推荐文章于 2022-09-05 15:32:45 发布

TwoZeroZero

最新推荐文章于 2022-09-05 15:32:45 发布

阅读量176

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/KongKong_Rac/article/details/108808851

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

两边固定，中间自适应三栏布局的实现方法

1. 利用flex弹性盒子模型

将父元素设置为弹性布局，则其子元素全自动成为容器成员，将中间部分子元素设置flex占比为1，则可填满剩余空间，两边设置固定宽度，即实现两边固定中间自适应。

<!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>
        .parent {
            /* 设置为弹性盒模型 */
            display: flex;
        }
        
        .left {
            width: 200px;
            height: 100px;
            background-color: #9999ff;
        }
        
        .right {
            width: 200px;
            height: 100px;
            background-color: #FF8888;
        }
        
        .center{
            height: 100px;
            /* 填满剩余空间，实现自适应 */
            flex: 1;
            background-color: #800000;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>

</html>

在这里插入图片描述
实现效果：

在这里插入图片描述

2. 圣杯布局

目的：三栏布局，实现中间一栏最先加载和渲染（内容最重要）

为三个元素都设置左浮动
为父元素设置padding，左右留出两边的空白位置
利用margin负值，将左边设置为margin-left: -100%;，左边向左移动，使left向左移动一整个行的宽度，但此时会盖住中间center的内容。
所以需要利用相对定位relative，设置元素相对自身定位，并左移left的宽度大小。
同理，right 利用margin负值，设置为margin-left: -300px;，左移right的宽度大小，此时覆盖中间center的内容。
所以需要利用相对定位relative，设置元素相对自身定位，并右移right的宽度大小。实现中间自适应。

完整代码：

<!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;
        }
        
        .container {
            padding: 0 300px 0 200px;
        }
        
        .center {
            width: 100%;
            height: 200px;
            float: left;
            background-color: #800000;
        }
        
        .left {
            left: -200px;
            position: relative;
            width: 200px;
            height: 200px;
            float: left;
            margin-left: -100%;
            background-color: #9999ff;
        }
        
        .right {
            position: relative;
            right: -300px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: -300px;
            background-color: #FF8888;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

在这里插入图片描述

3. 双飞翼布局

目的：三栏布局，实现中间一栏最先加载和渲染（内容最重要）

给中间部分添加一个div父容器包裹
为三个元素（中间栏在父元素设置）都设置左浮动
在子div，即中间栏设置margin左右值，来为左右栏留出位置
利用margin负值，将左边设置为margin-left: -100%;，左边向左移动，使left向左移动一整个行的宽度。
同理，right 利用margin负值，设置为margin-left: -300px;，左移right的宽度大小。实现自适应。

完整代码：

<!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;
        }
        
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: #800000;
        }
        
        .center {
            margin: 0 300px 0 200px;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 200px;
            margin-left: -100%;
            background-color: #9999ff;
        }
        
        .right {
            float: left;
            width: 300px;
            height: 200px;
            margin-left: -300px;
            background-color: #FF8888;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main">
            <div class="center">center</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

4. 双飞翼布局和圣杯布局的区别

解决中间栏内容被覆盖的思路不同。
圣杯布局是将中间栏设置了padding之后，左右栏配合设置定位以及left和right移动来实现效果；
而双飞翼布局利用一个新的容器包裹中间栏，使其成为子div，再在子div设置margin左右值，来为左右栏留出位置，同时使得内容不被覆盖，并且双飞翼不需为左右栏设置定位及左右left、right移动，更为简单。