css实现三栏布局几种方法

1、绝对定位法

将左右两边使用absolute定位，设置宽高（px或百分比）。因为使用绝对定位会脱离文档流，后面的中间栏会自然流动到他们上面，然后中间栏使用margin属性，留出左右元素的宽度，就可以使中间栏自适应屏幕宽度了。注意中间栏的左右margin值应分别为左栏的宽度和右栏的宽度。

<body>
    <!-- 分栏 -->
    <!-- 左 -->
    <div class="column1">左</div>
    <!-- 右 -->
    <div class="column2">右</div>
    <!-- 中 -->
    <div class="column3">中</div>
</body>


/* 左 右*/
.column1,
.column2 {
    position: absolute;
    width: 200px;
    height: 100%;
}
.column1 {
    left: 0;
    background-color: cyan;
}
.column2 {
    right: 0;
    background-color: greenyellow;
}
/* 中间 */
.column3 {
    /* width: 500px; */
    height: 100%;
    margin: 0 200px;
    background-color: hotpink;
}

2、自身浮动法

自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

<body>
    <!-- 分栏 -->
    <!-- 左 -->
    <div class="column1">左</div>
    <!-- 右 -->
    <div class="column2">右</div>
    <!-- 中 -->
    <div class="column3">中</div>
</body>

.column1 {
    /* width: 100px; */
    width: 20%;
    height: 100%;
    float: left;
    background-color: aqua;
}
.column2 {
    /* width: 100px; */
    width: 20%;
    height: 100%;
    float: right;
    background-color: aquamarine;
}
.column3 {
    margin: 0 20%;
    /* width: 50%; */
    /* width: 300px; */
    height: 100%;
    background-color: chocolate;
}

该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行。

3、margin负值法

首先需要在center元素外部包含一个wrap容器（双层标签），包含div需要设置float:left，使其脱离文档流，设置左右margin（可为左右栏预留空间）。对左右栏也要设置float:left，左栏设置
margin-left值为负wrap容器的宽度，右栏margin-left值的绝对值要大于等于center栏的右margin值，否则右栏会挤到下一行。

<body>
    <div class="wrap">
        <div class="center-column">中间</div>
    </div>
    <div class="left-column">左</div>
    <div class="right-column">右</div>
</body>

.wrap {
    width: 100%;
    height: 100%;
    float: left;
    background-color: hotpink;
}
.wrap .center-column {
    height: 100%;
    margin: 0 210px;
    background-color: lawngreen;
}
.left-column,
.right-column {
    float: left;
    width: 210px;
    height: 100%;
}
.left-column {
    /* left块的margin负值一定要等于wrap容器的宽度 */
    margin-left: -100%;
    background-color: lightcoral;
}
.right-column {
    /* right块的margin负值为中间块的右margin值 */
    margin-left: -210px;
    background-color: lightseagreen;
}

该方法在网站布局中非常常见，优点是三栏相互关联，有一定的抗性。需要注意的是，布局中间部分一定要放在前面，左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。

4、flex布局

使用一个容器包含三栏，容器设置为flex布局。注意center块一定要放在中间，并且设置flex:1。

<body>
    <div class="box">
        <div class="left">左边</div>
        <div class="center">中间</div>
        <div class="right">右边</div>
    </div>
</body>

.box {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: lightskyblue;
}
.left,
.right {
    width: 200px;
    height: 100%;
}
.left {
    background-color: lime;
}
.right {
    background-color: magenta;
}
.center {
    flex: 1;
    background-color: mediumorchid;
}

效果图

posted @ 2020-08-12 07:10  小耳朵兔  阅读(405)  评论(0)    收藏  举报