关于css技巧类的在网站里已经发了很多了，那么我今天在总结归纳一下平时在工作中可以遇到问题，并且说一下用css的解决方案，什么是多列等高布局？
点击增加一侧文字，另一侧背景也增加。
html代码：
haorooms多列等高布局左多列等高布局,使用正负 margin 与 padding 相冲的方式实现。
方法一： 使用正负 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;}给一个足够大的padding和负margin
立即学习“前端免费学习笔记（深入）”；
二、使用 display:flex 的方式实现
这个方式很简单，移动端我们经常用，container 设置为display:flex，子元素设置为flex：1就可以了。
三、display:table-cell 实现
和上面方法类似，container 设置为display:table;，子元素设置为display:table-cell;就可以了。
四、 父容器设置背景色实现
如下：
#container{
width:400px;
margin:0 auto;
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: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;}六、border实现
#container{
border-left:200px solid yellowgreen;
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代码如下：
1 2 3 4 5
css代码如下：
.justify{ text-align: justify; text-align-last: justify; // 新增这一行}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center;}
text-align-last兼容性不是很好，可以使用::after，
.justify{ text-align: justify;}.justify i{ 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代码如下：
- haorooms
- 测试
- hao测试
- 右侧
- 边界线
- 消失
- 测试
css代码：
ul{
width: 300px;
margin-left:-1px;}li{
float:left;
width:99px;
line-height:30px;
text-align:center;
border-left:1px solid #999;
font-size:18px;
margin-bottom:10px;}.ul-container{
width: 300px;
margin: 50px auto;
overflow:hidden;
background: #eee;
padding:10px 0;}方法二 ：使用伪类选择器
// 使用伪类选择器，选择第 3n 个元素去掉边框li:nth-child(3n){
border-right:none;}
在工作中常见的问题就这么多了，更多精彩请关注php中文网其它相关文章！
相关阅读：
