css两列等高,css多列等高布局

多列等高布局，算是比较常见的一种布局，要求两列布局看上去高度一致(就是通常是两列背景色一致)。

多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。

多列等高布局

使用display:flex的方式实现#container{

width:400px;

margin:0 auto;

background-color: #ddd;

overflow:hidden;

display:flex;

}

.left,

.right{

width:200px;

font-size: 16px;

line-height:24px;

color:#333;

}

.left{

background-color: deeppink;

}

.right{

background-color:yellowgreen;

}

拥抱Flexbox弹性布局基本概念之Flex容器一文中强调：侧轴Flex项目默认是align-items：stretch。如果Flex项目有尺寸属性(min-width / max-width / width / min-height / max-height / height)，那么首先应用这些尺寸属性。即(left、right)Flex项目不要写高度等。

使用正负margin与padding相冲的方式实现#container{

width:400px;

margin:0 auto;

background:#eee;

overflow:hidden;

}

.left,

.right{

width:200px;

float:left;

font-size: 16px;

line-height:24px;

color:#333;

padding-bottom:5000px;

margin-bottom:-5000px;

}

.left{

background-color: deeppink;

}

.right{

background-color:yellowgreen;

}

父容器线性渐变多重背景色

#container{

width:400px;

margin:0 auto;

background-image:

linear-gradient(90deg, yellowgreen 50%, deeppink 0);

overflow:hidden;

}

.left,

.right{

width:200px;

float:left;

font-size: 16px;

line-height:24px;

color:#333;

}

display:table-cell实现

多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。

多列等高布局

#container{

width:400px;

margin:0 auto;

background:#eee;

overflow:hidden;

display:table;

}

.left,

.right{

display:table-cell;

width:200px;

font-size: 16px;

line-height:24px;

color:#333;

}

.left{

background-color: deeppink;

}

.right{

background-color:yellowgreen;

}