html中如何让三个方块并排,CSS实现多个小方块两端对齐

需求

直接上图吧，要实现多个小方块在大盒子里的两端对齐，大部分我们都是想到用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来两端对齐需要注意在只有一行的情况下并不能实现两端对齐，那么我们需要使用伪元素来伪造出第二行，这样来使第一行实现两端对齐。