【CSS】已知高度，写出三栏布局

问题：

已知高度，写出三栏布局，其中左右两栏宽度各位200px，中间自适应

回答：

解决方案（1）浮动；（2）绝对定位；（3）弹性布局；（4）表格布局；（5）网格布局。

拓展问题：

（1）每个解决方案的优缺点
（2）他们之间的比较，假设高度去掉，那种方法还能适用或者不适用
（3）解决方案的兼容性，哪个更适用在实际项目中

拓展回答：

（1）
A：缺点：浮动脱离文档流，所以使用的时候要清除浮动；优点：兼容性比较好
B：缺点：绝对定位布局脱离文档，它的子元素也会脱离文档流；优点：使用快捷，不容易出现问题，兼容性也比较好
C：弹性布局是为了解决上述问题出现的，比较完美的一个
D：表格布局比较繁琐，不利于SEO优化；表格布局兼容性比较好，IE8不支持flex，但支持表格。当其中的一个单元格超出的，两侧单元格也会同时增高，根据场景决定。
E：网格布局作为一个新技术，可以实现很多复杂的布局，代码量简化很多。
（2）flex布局和表格布局。浮动布局因为左侧有遮挡，所以没有超出的文本会在中间出现，超出部分没有遮挡会再左侧出现。

变通：

公共样式：

设置大小盒子的高度为 100px，左右（left 和 right）的 div 宽度固定为 200px, 并分别给三个盒子设置不同颜色用来区分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

* {
    padding: 0;
    margin: 0;
}
.layout {
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.layout div {
    height: 100px;
}
.layout .left {
    width: 200px;
    background-color: blue;
}
.layout .center {
    background-color: yellow;
}
.layout .right { 
    width: 200px;
    background-color: red;
}

（1）方案一：浮动

center 的 div 需要放到后面（其余方案都不需要更改 Html 顺序），对左右 div 使用 float:left 和 float：right，float 使左右两个元素脱离文档流，中间的正常文档流中。

1
2
3
4
5
6

.float .left {
    float: left;
}   
.float .right {
    float: right;
}

1
2
3
4
5
6
7

<section class="layout">
    <article class="float">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>

（2）方案二：绝对定位

将 left、right 和 center 的 div 都设置 absolute 脱离文档流，给 center 的 div 设置左右两边距离 200px (即左右两边盒子的实际宽度)。

1
2
3
4
5
6
7
8
9
10
11
12
13

.absolute div {
    position: absolute;
}
.absolute .left {
    left: 0;
}
.absolute .center {
    left: 200px;
    right: 200px;
}
.absolute .right {
    right: 0;
}

1
2
3
4
5
6
7

<section class="layout">
    <article class="absolute">
        <div class="left"></div>
        <div class="center">absolute</div>
        <div class="right"></div>
    </article>
</section>

（3）方案三：弹性布局

设置大盒子为 display: flex;，给 center 的 div 设置 flex: 1，除去左右盒子的宽度外剩余宽度是 center 的宽度。

1
2
3
4
5
6

.flexbox {
    display: flex;
}
.center {
    flex: 1;
}

（4）方案四：表格布局

设置大盒子为 display: table;，将 left、right 和 center 的 div 都设置 display: table-cell 。

1
2
3
4
5
6
7

.table {
    width: 100%;
    display: table;
}
.table div{
    display: table-cell;
}

（5）方案五：网格布局

就给大盒子设置属性。

1
2
3
4
5
6

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

• Previous Post →
• ← Next Post

赏 支付宝打赏 微信打赏

欣赏此文，打赏一下