一開始我猜測使用它可以實(shí)現(xiàn)，采用如下 CSS ：

.justify{
 text-align: justify;
}

.justify i{
 width:24px;
 line-height:24px;
 display:inline-block;
 text-align:center;
 border-radius:50%;
}

結(jié)果如下：

Demo戳我

沒有得到意料之中的結(jié)果，并沒有實(shí)現(xiàn)所謂的兩端對齊，查找原因，在 W3C 找到這樣一段解釋:

最后一個(gè)水平對齊屬性是 justify，它會帶來自己的一些問題。CSS 中沒有說明如何處理連字符，因?yàn)椴煌恼Z言有不同的連字符規(guī)則。規(guī)范沒有嘗試去調(diào)和這樣一些很可能不完備的規(guī)則，而是干脆不提這個(gè)問題。

額，我看完上面一大段解釋還是沒明白上面意思，再繼續(xù)查證，才找到原因：

雖然 text-align:justify 屬性是全兼容的，但是要使用它實(shí)現(xiàn)兩端對齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用。

也就是說每一個(gè) 1 間隙，至少需要有一個(gè)空格或者換行或者制表符才行。

好的，我們嘗試一下更新一下 HTML 結(jié)構(gòu)，采用同樣的 CSS：

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

 <i>2</i>

 <i>3</i>

 <i>4</i>

 <i>5</i>

 </p>
</p>

嘗試給每一塊中間添加一個(gè)換行符，結(jié)果如下：

啊哦，還是不行啊。

再尋找原因，原來是出在最后一個(gè)元素上面，然后我找到了 text-align-last 這個(gè)屬性，text-align-last屬性規(guī)定如何對齊文本的最后一行，并且 text-align-last 屬性只有在 text-align 屬性設(shè)置為 justify 時(shí)才起作用。

嘗試給容器添加 text-align-last:justify：

.justify{
 text-align: justify;
 text-align-last: justify; // 新增這一行
}

.justify i{
 width:24px;
 line-height:24px;
 display:inline-block;
 text-align:center;
 border-radius:50%;
}

發(fā)現(xiàn)終于可以了，實(shí)現(xiàn)了多列均勻布局：

結(jié)束了？沒有，查看一下 text-align-last 的兼容性：

但是一看兼容性，慘不忍睹，只有 IE8+ 和 最新的 chrome 支持 text-align-last 屬性，也就是說，如果你不是在使用 IE8+ 或者 最新版的 chrome 觀看本文，上面 Demo 里的打開的 codePen 例子還是沒有均勻分布。

上面說了要使用 text-align:justify 實(shí)現(xiàn)多列布局，要配合 text-align-last ，但是它的兼容性又不好，真的沒辦法了么，其實(shí)還是有的，使用偽元素配合，不需要 text-align-last 屬性。

我們給 class="justify" 的 p 添加一個(gè)偽元素：

.justify{
 text-align: justify;
}

.justify i{
 width:24px;
 line-height:24px;
 display:inline-block;
 text-align:center;
 border-radius:50%;
}

.justify:after {
 content: "";
 display: inline-block;
 position: relative;
 width: 100%;
}

去掉了 text-align-last: justify 了，增加一個(gè)偽元素，效果如下：

通過給偽元素 :after 設(shè)置 inline-block 設(shè)置寬度 100% ，配合容器的 text-align: justify 就可以輕松實(shí)現(xiàn)多列均勻布局了。再多配合幾句 hack 代碼，可以實(shí)現(xiàn)兼容到 IE6+ ，最重要的是代碼不長，很好理解。

那么為什么使用了 :after 偽元素之后就可以實(shí)現(xiàn)對齊了呢？

原因在于 justify 只有在存在第二行的情況下，第一行才兩端對齊，所以在這里，我們需要制造一個(gè)假的第二行，而 :after 偽元素正好再適合不過。

最終實(shí)現(xiàn)題目初始所示：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com