有趣的CSS題目（6）：全相容的多列均勻佈局問題

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



1
2
3
4
5
6
7
8
9

<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 ：

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



1
2
3
4
5
6
7
8
9
10
11

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

結果如下：

Demo戳我

See the Pen justify1 by Chokcoco (@Chokcoco) on CodePen.

沒有得到意料之中的結果，並沒有實現所謂的兩端對齊，查詢原因，在 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>

</div>

嘗試給每一塊中間新增一個換行符，結果如下：

Demo戳我

See the Pen justify2 by Chokcoco (@Chokcoco) on CodePen.

啊哦，還是不行啊。

再尋找原因，原來是出在最後一個元素上面，然後我找到了 text-align-last 這個屬性，text-align-last屬性規定如何對齊文字的最後一行，並且 text-align-last 屬性只有在 text-align 屬性設定為 justify 時才起作用。

嘗試給容器新增 text-align-last:justify：

CSS
.justify{
  text-align: justify;
  text-align-last: justify; // 新增這一行
}
 
.justify i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}



1
2
3
4
5
6
7
8
9
10
11
12

.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戳我

See the Pen justify-last by Chokcoco (@Chokcoco) on CodePen.

結束了？沒有，檢視一下 text-align-last 的相容性：

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

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

我們給 class="justify" 的 div 新增一個偽元素：

CSS
.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%;
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.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%;
}