点击增加一侧文字，另一侧背景也增加。
html代码：
<divid="container"><divclass="left">haorooms多列等高布局左</div><divclass="right"id="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"><i>1</i><i>2</i><i>3</i><i>4</i><i>5</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><li>haorooms</li><li>测试</li><li>hao测试</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;}
