CSS实现 全兼容的多列均匀布局问题

摘要: 全兼容的多列均匀布局问题

如何实现下列这种多列均匀布局（图中直线为了展示容器宽度，不算在内）：



方法一：display:flex

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为。

当然 flex 布局应用于移动端不错，PC 端需要全兼容的话，兼容性不够，此处略过不谈。

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

定义如下 HTML 样式：

<div class="container">
<div class="justify">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</div>

我们知道，有个 text-align:justify 可以实现两端对齐文本效果。

text-align CSS 属性定义行内内容如何相对它的块父级元素对齐。text-align并不控制元素自己的对齐，只控制它的行内内容的对齐。

采用如下css：

.justify{
text-align: justify;/*让文字向两端对齐*/
background: #ddd;
}
.justify p{
margin:0px;
width:24px;
line-height:24px;
display:inline-block;
text-align:center;
border-radius:50%;
background:#000;
color: #fff;
}

结果如下：



没有得到意料之中的结果，并没有实现所谓的两端对齐，查找原因，

虽然 text-align:justify 属性是全兼容的，但是要使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用。

算是在页面加了空格还是不行，例如：

<div class="container">
<div class="justify">
<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

<p>5</p>

<p>6</p>
</div>
</div>

显示的效果还是一样的。

我们给 class="justify" 的 div 添加一个伪元素：

       .justify{
text-align: justify;/*让文字向两端对齐*/
background: #ddd;
}
.justify p{
margin:0px;
width:24px;
line-height:24px;
display:inline-block;
text-align:center;
border-radius:50%;
background:#000;
color: #fff;
}
.justify:after {
content: "";
display: inline-block;
position: relative;
width: 100%;
}

结果如下：