CSS实现多列等高布局实现方式

《CSS实现多列等高布局实现方式》正文开始，本次阅读大概7分钟。

何为多列等高布局？如下图这样

点击增加一侧文字，另一侧背景也增加。

html代码：

divid=container
divclass=lefthaorooms多列等高布局左/div
divclass=rightid=rights多列等高布局,使用正负margin与padding相冲的方式实现。/div
/div

方法一： 使用正负 margin 与 padding 相冲的方式实现

#container{
width:400px;
margin:0auto;
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;}

给一个足够大的padding和负margin

二、使用 display:flex 的方式实现

这个方式很简单，移动端我们经常用，container 设置为display:flex，子元素设置为flex：1就可以了。

三、display:table-cell 实现

和上面方法类似，container 设置为display:table;，子元素设置为display:table-cell;就可以了。

四、 父容器设置背景色实现

如下：

#container{
width:400px;
margin:0auto;
background-color:deeppink;
overflow:hidden;}.left,.right{
width:200px;
float:left;
font-size:16px;
line-height:24px;
color:#333;}.right{
background-color:yellowgreen;}

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

#container{
width:400px;
margin:0auto;
background-image:
linear-gradient(90deg,yellowgreen50%,deeppink0);
overflow:hidden;}.left,.right{
width:200px;
float:left;
font-size:16px;
line-height:24px;
color:#333;}

六、border实现

#container{
border-left:200pxsolidyellowgreen;
background-color:deeppink;
width:200px;
font-size:16px;
line-height:24px;
color:#333;
}
.left{
width:200px;
margin-left:-200px;
float:left;
}

多列均匀布局

如下图这样均匀布局

方法一：display:flex

这种方法上面也讲过，实现起来比较简单，适合移动端布局。

方法二：借助伪元素及 text-align:justify

html代码如下：

divclass=container
divclass=justify
i1/i
i2/i
i3/i
i4/i
i5/i
/div/div

css代码如下：

.justify{
text-align:justify;
text-align-last:justify;//新增这一行}.justifyi{
width:24px;
line-height:24px;
display:inline-block;
text-align:center;}

text-align-last兼容性不是很好，可以使用::after，

.justify{
text-align:justify;}.justifyi{
width:24px;
line-height:24px;
display:inline-block;
text-align:center;
border-radius:50%;}.justify:after{
content:;
display:inline-block;
position:relative;
width:100%;}

列表布局边界线问题

如下图：

方法一：margin负边距

思路：

外层设置width，overflow设置为hidden,内层设置负边距，margin-left:-1px;就可以把左侧边距隐藏

html代码如下：

divclass=ul-container
ul
lihaorooms/li
li测试/li
lihao测试/li
li右侧/li
li边界线/li
li消失/li
li测试/li
/ul/div

css代码：

ul{
width:300px;
margin-left:-1px;}li{
float:left;
width:99px;
line-height:30px;
text-align:center;
border-left:1pxsolid#999;
font-size:18px;
margin-bottom:10px;}.ul-container{
width:300px;
margin:50pxauto;
overflow:hidden;
background:#eee;
padding:10px0;}

方法二 ：使用伪类选择器

//使用伪类选择器，选择第3n个元素去掉边框li:nth-child(3n){
border-right:none;}