摘要：问题已知高度，写出三栏布局，其中左右两栏宽度各位，中间自适应回答效果示例解决方案浮动绝对定位弹性布局表格布局网格布局。方案二绝对定位将和的都设置脱离文档流，给的设置左右两边距离即左右两边盒子的实际宽度。
已知高度，写出三栏布局，其中左右两栏宽度各位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;
}
（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;
}
（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;
}
更多文章分享：https://www.artroy.com.cn/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54200.html
摘要：假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应的五种方法页面布局题目假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应浮动解决方案浮动解决方案这是三栏布局的中间部分这是三栏布局的中间部分绝 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法 HTML CSS 页面布局 题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px...
摘要：假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应的五种方法页面布局题目假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应浮动解决方案浮动解决方案这是三栏布局的中间部分这是三栏布局的中间部分绝 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法 HTML CSS 页面布局 题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px...
摘要：题目假设高度已知，请写出三栏布局，其中左栏右栏宽度各为，中间自适应三栏布局的种方案这是一道经典的面试题，下面记录了布局的种方法。 题目:假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应. 三栏布局的5种方案 这是一道经典的面试题，下面记录了css布局的5种方法。 三栏布局 * { margin: 0; ...
阅读 1419·2019-08-30 13:18
阅读 1345·2019-08-29 12:19
阅读 1887·2019-08-26 13:57
阅读 3847·2019-08-26 13:22
阅读 753·2019-08-26 10:35
阅读 2826·2019-08-23 18:09
阅读 2303·2019-08-23 17:19
阅读 486·2019-08-23 17:18
