常见的面试问题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, 并分别给三个盒子设置不同颜色用来区分。

* {
    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 使左右两个元素脱离文档流，中间的正常文档流中。

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

<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 (即左右两边盒子的实际宽度)。

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

<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 的宽度。

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

（4）方案四：表格布局

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

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

（5）方案五：网格布局

就给大盒子设置属性。

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