CSS实现两端对齐（及原理）

废话不多说，先放实际代码。

<div>
    <div class='row'>中文两端对齐<span></span></div>
	<div class='row'>中文ok<span></span></div>
</div>

.row{
    width: 300px;
    text-align: justify;
}
.row span{width:100%;display: inline-block;}

效果：

说明：上述css样式都不能缺少。

原理思路

text-align: justify;的作用是两端对齐，但对中文并不能很好的兼容。如果我们把宽度设定的足够小，观察一下效果。

<p>两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐</p>

p{text-align: justify;width: 62px;}

可以看出来，如果行数超过一行那么两端对齐可以生效。于是在原本的div中加入一个with:100%的span就可触发同样效果。