CSS三列布局（五种方式）-优快云博客

本文链接：https://blog.youkuaiyun.com/Rita_518/article/details/123294238

本文详细介绍了CSS实现三列布局的五种方式：float、position、table、flex和grid。强调了每种方法的特点与适用场景，如float布局需注意清除浮动，position布局不适合页面布局，table布局利于兼容但影响搜索引擎抓取，flex布局强大但IE兼容性有限，而grid布局虽强大但兼容性较差。

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

/*前提：左右宽度为300px，高度为100px，中间宽度自适应*/

* {
    margin: 0;
    padding: 0;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="三列布局.css">
</head>

<body>
    <article class="main">
        <div class="left">left</div>
        <div class="center">center
            <p>this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long
                paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph this is a long paragraph</p>
        </div>
        <div class="right">right</div>
        
    </article>
</body>

</html>

一、float

/* 1.float */

.left {
    background-color: antiquewhite;
    height: 100px;
    width: 300px;
    float: left;
}

.right {
    background-color: antiquewhite;
    height: 100px;
    width: 300px;
    float: right;
}

.center {
    background-color: aquamarine;
    margin-left: 300px;
    margin-right: 300px;
}

.center::after {
    content: "";
    display: block;
    clear: both;
}

这里注意，由于使用了浮动布局，为了不影响后续元素表现，需要在浮动元素结束之后清除浮动。

二、positioin

/* 2.position */

.main {
    position: relative;
}

.left,
.center,
.right {
    position: absolute;
}

.left {
    background-color: antiquewhite;
    width: 300px;
    left: 0;
}

.center {
    background-color: aquamarine;
    left: 300px;
    right: 300px;
}

.right {
    background-color: antiquewhite;
    width: 300px;
    right: 0;
}

三、table

.main {
    display: table;
    width: 100%;
}

.left,
.center,
.right {
    display: table-cell;
}

.left,
.right {
    width: 300px;
    background-color: antiquewhite;
}

.center {
    background-color: aquamarine;
}

四、flex

.main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}

.left,
.right {
    background-color: antiquewhite;
    width: 300px;
}

.center {
    background-color: aquamarine;
    flex: 1;
}

需要注意flex:1
flex属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

flex-grow 属性定义项目的放大比例(剩余空间按比例分配)。默认为0，即如果存在剩余空间，也不放大。
flex-shrink ——属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis ——属性定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，大部分情况和width表现一致，如果两者同时使用flex-basis优先级会高一些。

flex属性的默认值为：0 1 auto （不放大会缩小）
flex为none：0 0 auto （不放大也不缩小）
flex为auto：1 1 auto （放大且缩小）
flex为一个非负数字n：该数字为flex-grow的值，
flex：n等价于

 flex-grow：n；
 flex-shrink：1；
 flex-basis：0%；

flex为两个非负数字n1，n2：分别为flex-grow和flex-shrink的值，
flex：n1 n2; 等价于

flex-grow：n1；
flex-shrink：n2；
flex-basis：0%；

flex为一个长度或百分比L：视为flex-basis的值，
flex: L; 等价于

flex-grow：1；
flex-shrink：1；
flex-basis：L；

flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，
flex：n L；等价于

flex-grow：n；
flex-shrink：1；
flex-basis：L;

可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。

所以，flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

五、grid

Flex 布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局，Grid 布局远比 Flex 布局强大。

.main {
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}

.left,
.right {
    background-color: antiquewhite;
}

.center {
    background-color: aquamarine;
}