题目：假设高度已知，请写出三栏布局，左右两栏宽度各为300px，中间自适应，经典页面布局题目，共有五种比较流行的解决方案。实现方式： 1. float布局
- 局限性：脱离文档流，需要清除浮动
- 优点：兼容性比较好
- 局限性：脱离文档流，可用性差
- 优点：快捷
- 优点：相对来说是最优的一种布局，随着浏览器支持越来越多
- 局限性：整个table是一个整体，在高度不确定时不适合使用
- 优点：兼容性好（ie8等）
- 局限性：浏览器支持率低
注意：当高度不确定时，只有flex和table布局可以使用，其他布局会出现问题第一种：Float布局
>
.layout-float>div{
height: 100px;
}
.left{
background: red;
width: 300px;
float: left;
}
.right{
background: green;
width: 300px;
float: right;
}
.center{
background: blue;
}
class="layout-float">
【三栏布局，已知高度和左右宽度，中间自适应，五种实现方式】注意：这种float的三栏布局，需要将中间的div放在最后。第二种：定位布局
>
.layout-position>div{
height: 100px;
position: absolute;
}
.left{
left: 0;
background: red;
width: 300px;
}
.center{
left: 300px;
right: 300px;
background: blue;
}
.right{
right: 0;
background: green;
width: 300px;
}
class="layout-position">
第三种：Flex布局
>
.layout-flex{
display: flex;
}
.flex>div{
height: 100px;
}
.left{
background: red;
width: 300px;
}
.center{
flex: 1;
/* 自适应，填满剩下的宽度 */
background: blue;
}
.right{
background: green;
width: 300px;
}
class="layout-flex">
第四种：Table布局
>
.layout-table{
display: table;
width: 100%;
height: 100px;
}
.layout-table>div{
display: table-cell;
}
.left{
background: red;
width: 300px;
}
.center{
background: blue;
}
.right{
background: green;
width: 300px;
}
class="layout-table">
第五种：网格布局
>
.layout-grid{
display: grid;
width: 100%;
grid-template-rows: 100px;
/* 行高 */
grid-template-columns: 300px auto 300px;
/* 3列 */
}
.left{
background: red;
}
.center{
background: blue;
}
.right{
background: green;
}
class="layout-grid">
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）