html 布局兼容,CSS三栏布局——多种方法详解，比较兼容性

题目:假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应.

三栏布局的5种方案

这是一道经典的面试题，下面记录了css布局的5种方法。

三栏布局

* {

margin: 0;

padding: 0;

}

1. 浮动解决方案

.layout.float article div {

min-height: 80px;

}

.layout.float .left {

width: 300px;

background-color: red;

float: left;

}

.layout.float .center {

background-color: yellow;

}

.layout.float .right {

width: 300px;

background-color: blue;

float: right;

}

三栏布局

浮动解决方案

1.这是三栏布局的浮动解决方案；

2.这是三栏布局的浮动解决方案；

3.这是三栏布局的浮动解决方案；

4.这是三栏布局的浮动解决方案；

5.这是三栏布局的浮动解决方案；

6.这是三栏布局的浮动解决方案；

2. 绝对定位解决方案

.layout.absolute article div {

min-height: 80px;

position: absolute;

}

.layout.absolute .left {

width: 300px;

background-color: red;

left: 0;

}

.layout.absolute .center {

background-color: yellow;

left: 300px;

right: 300px;

}

.layout.absolute .right {

width: 300px;

background-color: blue;

right: 0;

}

三栏布局

绝对定位解决方案

1.这是三栏布局的绝对定位解决方案；

2.这是三栏布局的绝对定位解决方案；

3.这是三栏布局的绝对定位解决方案；

4.这是三栏布局的绝对定位解决方案；

5.这是三栏布局的绝对定位解决方案；

6.这是三栏布局的绝对定位解决方案；

3. flexbox 解决方案

/* flexbox解决方案在浏览器中显示时被上面的绝对定位解决方案挡住了,设置一个margin-top */

.layout.flexbox {

margin-top: 110px;

}

/* 设置最低高度 */

.layout.flexbox article div {

min-height: 80px;

}

.layout.flexbox article {

display: flex;

}

.layout.flexbox .left {

width: 300px;

background-color: red;

}

.layout.flexbox .center {

/*center部分增长 使整行填充*/

flex: 1;

background-color: yellow;

}

.layout.flexbox .right {

width: 300px;

background-color: blue;

}

三栏布局

flexbox解决方案

1.这是三栏布局的flexbox解决方案；

2.这是三栏布局的flexbox解决方案；

3.这是三栏布局的flexbox解决方案；

4.这是三栏布局的flexbox解决方案；

5.这是三栏布局的flexbox解决方案；

6.这是三栏布局的flexbox解决方案；

4. 表格布局解决方案

.layout.table .left-center-right {

width: 100%;

min-height: 80px;

display: table;

}

.layout.table .left-center-right>div {

display: table-cell;

}

.layout.table .left {

width: 300px;

background-color: red;

}

.layout.table .center {

background-color: yellow;

}

.layout.table .right {

width: 300px;

background-color: blue;

}

三栏布局

表格布局解决方案

1.这是三栏布局的表格布局解决方案；

2.这是三栏布局的表格布局解决方案；

3.这是三栏布局的表格布局解决方案；

4.这是三栏布局的表格布局解决方案；

5.这是三栏布局的表格布局解决方案；

6.这是三栏布局的表格布局解决方案；

5. 网格布局解决方案

.layout.grid .left-center-right {

width: 100%;

display: grid;

/* 网格行高 */

grid-template-rows: 100px;

/* 网格列宽 */

grid-template-columns: 300px auto 300px;

}

.layout.grid .left {

background-color: red;

}

.layout.grid .center {

background-color: yellow;

}

.layout.grid .right {

background-color: blue;

}

三栏布局

网格布局解决方案

1.这是三栏布局的网格布局解决方案；

2.这是三栏布局的网格布局解决方案；

3.这是三栏布局的网格布局解决方案；

4.这是三栏布局的网格布局解决方案；

5.这是三栏布局的网格布局解决方案；

6.这是三栏布局的网格布局解决方案；

效果：

自适应(将浏览器窗口压窄)的变化

将浏览器窗口压窄，可以看到变化。由于上面的代码中设置的高度是min-width，而不是设置的固定高度width，所以现在看到的也就是高度不固定的情况。

5种布局方案在高度不固定的情况下呈现出不同的效果的分析

浮动解决方案中：center部分会被内容撑高并向两边扩充，两边盒子的大小不受影响。

绝对定位解决方案中：center部分会被内容撑高，不向两边扩充，两边盒子大小不受影响。

flexbox解决方案中：center部分会被内容撑高，并且两边的盒子与center高度始终保持一致。

这是因为在flex布局中，align-items属性默认为stretch,如果设置为：align-items: center;或align-items: start;或align-items: end;或其他值，那么就不会自动保持一样高。参见：MDN: flex 布局的基本概念

表格布局解决方案中：center部分会被内容撑高，并且两边的盒子与center高度始终保持一致。

网格布局解决方案中：盒子大小都不变化，文字直接超出center部分。