CSS实现三列布局的3种方法及解析

最新推荐文章于 2024-02-05 14:39:35 发布

SpringRolls

最新推荐文章于 2024-02-05 14:39:35 发布

阅读量3.7k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/SpringRolls/article/details/105925847

版权

前端专栏收录该内容

56 篇文章 4 订阅

订阅专栏

答案：

1. CSS浮动

第一个 float:left，第二个 float:right，第三个设置margin-left和margin-right

2. 绝对定位法

第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right

3. flex布局

将父元素box设为 display:flex;可将box设置为弹性盒模型进行布局

两栏布局：https://www.jianshu.com/p/267239f8e4b2

详细解析：

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见。

比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。

1. 浮动布局：第一个float:left，第二个float:right，第三个设置margin-left和margin-right

左栏左浮动，右栏右浮动，中间主体放在左栏右栏后面（中间栏会占据整行）。

注意点：必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。

中间的宽度不固定，所以要加上margin左右的宽度让左右元素浮动

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .left {
            width: 400px;
            height: 500px;
            background: red;
            float: left;
        }

        .center {
            height: 500px;
            background: yellow;
            margin-left: 470px;
            margin-right: 470px;
        }

        .right {
            width: 400px;
            height: 500px;
            background: red;
            float: right;
        }
    </style>
</head>

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

</html>

2. 绝对布局：第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right

两边用绝对定位，中间用margin，左右宽度固定，中间宽度不固定，中间主体放在左栏右栏后面（中间栏会占据整行）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .left {
            width: 400px;
            height: 500px;
            background: red;
            position: absolute;
            left: 0;
        }

        .center {
            height: 500px;
            background: yellow;
            margin-left: 470px;
            margin-right: 470px;
        }

        .right {
            width: 400px;
            height: 500px;
            background: red;
            position: absolute;
            right: 0;
        }
    </style>
</head>

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

</html>

3. flex布局：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局.

flex-grow属性定义项目的放大比例，默认为0（不放大），即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1（缩），即如果空间不足，该项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为auto，即项目的本来大小。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100%;
            height: 500px;
            display: flex;
            margin: 10px;
        }
        
        .left,
        .right {
            width: 400px;
            height: 500px;
            margin: 10px;
            background-color: red;
        }

        .center {
            /* flex属性是flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
            flex: 1;  /* 放大 */
            height: 500px;
            margin: 10px;
            /*左右margin不会叠加*/
            background-color: yellow;
        }
    </style>
</head>

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

</html>