需求
直接上图吧,要实现多个小方块在大盒子里的两端对齐,大部分我们都是想到用flex布局,简单方便。
实现
上代码:
HTML:
1
2
3
4
CSS:
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.container {
width: 80%;
margin-left: 10%;
height: 50px;
border: 1px solid #ccc;
}
以上用flex布局实现已经基本上能够满足日常的需求,由于有些情况需要兼容IE低版本,那么我们使用两端对齐text-align:justify的方式来实现:
.justify {
text-align: justify;
}
.justify:after {
content: "";
display: inline-block;
width: 100%;
}
i {
display: inline-block;
width: 30px;
height: 30px;
background-color: #ccc;
border-radius: 3px;
margin: 0 4px;
text-align: center;
line-height: 30px;
}
注意:
使用justify来两端对齐需要注意在只有一行的情况下并不能实现两端对齐,那么我们需要使用伪元素来伪造出第二行,这样来使第一行实现两端对齐。