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

2019独角兽企业重金招聘Python工程师标准>>>

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

方法一：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%;
		}

结果如下：

转载于:https://my.oschina.net/u/1778998/blog/779670