CSS经典多栏布局（多列自适应布局、等高布局、圣杯布局、双飞翼布局）

最新推荐文章于 2025-08-12 15:50:47 发布

原创最新推荐文章于 2025-08-12 15:50:47 发布 · 838 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #经典布局 #等高圣杯双飞翼

HTML+CSS 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了CSS中的四种经典布局模式：多列自适应布局，包括两列和三列布局；等高布局，通过伪等高和真等高实现；圣杯布局，通过设置内边距实现中心内容居中；以及双飞翼布局，特点在于使用额外的盒子和外边距将内容置于中心。每种布局都有其优缺点，适用于不同的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、多列自适应布局

自适应: 盒子宽度随着屏幕宽度发生变化百分比

1:两列自适应布局
在这里插入图片描述
要求:左侧盒子固定,右侧盒子100% 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子

2: 三列自适应布局

左右两侧固定宽度,中间盒子自适应

技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排

二、等高布局

height:auto时的现象
在这里插入图片描述
height:auto 全部都是内容撑开

每一列盒子高度同时变化,以最高的那列为基准整个盒子的高度应该取决于最高的那列

等高布局
在这里插入图片描述
伪等高 —>内外边距相消法

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .c {
        overflow: hidden;

    }
    .col1 {
        width: 30%;
        height: 400px;
        background-color: yellow;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col2 {
        width: 40%;
        height: 300px;
        background-color: red;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .col3 {
        width: 30%;
        height: 500px;
        background-color: palegoldenrod;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    
    
    </style>
</head>
<body>
    <div class="c">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
    </div>
</body>
</html>

H= height + padding+border+margin

真等高 —> 背景盒子法

原理: 父盒子取决于内容盒子里最高的盒子的高度

(1)多列浮动并排清除浮动影响

(2)给最外侧的盒子在套几个盒子套的盒子数量= 列的数量(每一列都要分配一个背景盒子)

(3)先移动倒数第2层的盒子然后依次移动倒数第3层…

设置负外边距移动

(4)移动相应的列到相应的背景盒子通过相对定位正值第一个移动的第3列向右移动的是第3列+第2列的宽度…

(5)最外侧盒子添加一个overflow:hidden属性

缺点: 需要嵌套多个标签结构略微复杂理解也比较困难

优点:真的等高兼容性比较好

每一个背景盒子都要设定一致的宽度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .a {
          

            width: 100%;
            
            background-color: purple;
            margin-left: -30%;
        }
        .b {
            width: 100%;
            background-color: yellow;
            margin-left: -30%;
        }
        .c {
            width: 100%;
            background-color: orange;
        }
      

        .col1 {
            width: 40%;
            height: 200px;
            /* background-color: red; */
            float: left;
            position: relative;
            left: 60%;
            

        }

        .col2 {
            width: 30%;
            height: 300px;
            /* background-color: yellow; */
            float: left;
            position: relative;
            left: 60%;

           
        }

        .col3 {
            width: 30%;
            height: 400px;
            /* background-color: blue; */
            float: left;
            position: relative;
            left: 60%;
          
            
        }
       
    </style>
</head>

<body>
    <div class="c">
        <div class="b">
            <div class="a">
                <div class="col1">第一列</div>
                <div class="col2">第2列</div>
                <div class="col3">第3列</div>
                <div style="clear:both"></div>
            </div>
        </div>
    </div>

</body>

</html>

三、圣杯布局

在这里插入图片描述
特征: 如何把中心内容移动到中心显示?

设置最外侧盒子的内边距吧实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .container {
        /* min-height: 最小高度  if 内容的高度<300px  取300px  */

        min-height: 300px;
        /* 4:内边距 ---> 把内容挤到中间来 */
        padding: 0px 220px 0px 200px;
    }
    .left {
        width: 200px;
        height: 400px;
        background-color: red;
        float: left;
        /* 2:向左走100% */
        margin-left: -100%;

    /* 5:利用相对定位想左移动自身的宽度 */
    position: relative;
    left:-200px;


    }
    .center {
        width: 100%;
        height: 400px;
        background-color: deeppink;
        float: left;
    }
    .right {
        width: 220px;
        height: 400px;
        background-color: palegreen;
        float: left;
        /* 3: */
        margin-left: -220px;
        /* 6:利用相对定位想右移动自身的宽度 */
    position: relative;
    right: -220px;
    
    }
    
    </style>
</head>
<body>
    <div class="container">
          <!-- 100%宽度 自适应  保证左右两侧的盒子同时和他并排右侧 -->
          <div class="center">中心盒子</div>

        <!-- 固定宽度 -->
        <div class="left">左侧盒子</div>
      
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

四、双飞翼布局

始于淘宝UED UED

特点: 给中心盒子在套一个盒子 ,这个盒子设置左右两侧的外边距 ,目的是把内容放到中心盒子身上展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    .c {
        min-height: 400px;

    }
    .center {
        width: 100%;
        height: 400px;
        background-color: red;
        float: left;
    }
    .left {
        width: 200px;
        height: 400px;
        background-color: skyblue;
        float: left;
        margin-left: -100%;
    }
    .right {
        width: 220px;
        height: 400px;
        background-color: silver;
        float: left;
        margin-left: -220px;
    }
    .inner {
        margin: 0px 220px 0px 200px;
    }
    </style>
</head>
<body>
    
    <div class="c">


        <div class="center">

            <div class="inner">
                    中间盒子
            </div>
            
         
        
        </div>
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>