談談一些有趣的CSS題目（六）-- 全兼容的多列均勻佈局問題

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

咱們知道，有個 text-align:justify 能夠實現兩端對齊文本效果。

text-align CSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。text-align 並不控制塊元素本身的對齊，只控制它的行內內容的對齊。

text-align:justify 表示文字向兩側對齊。

一開始我猜想使用它能夠實現，採用以下 CSS ：

.justify{
  text-align: justify;
}

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

結果以下：

Demo戳我

沒有獲得意料之中的結果，並無實現所謂的兩端對齊，查找緣由，在 W3C 找到這樣一段解釋:

最後一個水平對齊屬性是 justify，它會帶來本身的一些問題。CSS 中沒有說明如何處理連字符，由於不一樣的語言有不一樣的連字符規則。規範沒有嘗試去調和這樣一些極可能不完備的規則，而是乾脆不提這個問題。

額，我看完上面一大段解釋仍是沒明白上面意思，再繼續查證，才找到緣由：

雖然 text-align:justify 屬性是全兼容的，可是要使用它實現兩端對齊，須要注意在模塊之間添加[空格/換行符/製表符]才能起做用。

也就是說每個 1 間隙，至少須要有一個空格或者換行或者製表符才行。

好的，咱們嘗試一下更新一下 HTML 結構，採用一樣的 CSS：

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

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </div>
</div>

嘗試給每一塊中間添加一個換行符，結果以下：

Demo戳我

啊哦，仍是不行啊。

再尋找緣由，原來是出在最後一個元素上面，而後我找到了 text-align-last 這個屬性，text-align-last屬性規定如何對齊文本的最後一行，而且 text-align-last 屬性只有在 text-align 屬性設置爲 justify 時才起做用。

嘗試給容器添加 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%;
}

發現終於能夠了，實現了多列均勻佈局：

Demo戳我

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

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

上面說了要使用 text-align:justify 實現多列布局，要配合 text-align-last ，可是它的兼容性又很差，真的沒辦法了麼，其實仍是有的，使用僞元素配合，不須要 text-align-last 屬性。

咱們給 class="justify" 的 div 添加一個僞元素：

.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 了，增長一個僞元素，效果以下：

Demo戳我，任意列數均勻佈局

經過給僞元素 :after 設置 inline-block 設置寬度 100% ，配合容器的 text-align: justify 就能夠輕鬆實現多列均勻佈局了。再多配合幾句 hack 代碼，能夠實現兼容到 IE6+ ，最重要的是代碼不長，很好理解。

那麼爲何使用了 :after 僞元素以後就能夠實現對齊了呢？

緣由在於 justify 只有在存在第二行的狀況下，第一行才兩端對齊，因此在這裏，咱們須要製造一個假的第二行，而 :after 僞元素正好再適合不過。

最終實現題目初始所示：

Demo戳我，任意列數均勻佈局

此方法初見於這篇文章，獲得原博主贊成寫入了本系列，很是值得一看：