CSS全相容的多列均勻佈局問題解決方法

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

會不斷更新，不斷更新，不斷更新，重要的事情說三次。

6、全相容的多列均勻佈局問題

#如何實現下列這種多列均勻佈局（圖中直線為了展示容器寬度，不算在內）：

法一：display:flex

#CSS3 彈性盒子(Flexible Box 或Flexbox)，是一種佈局方式，當頁面需要適應不同的螢幕大小以及裝置類型時，它依然能確保元素擁有更恰當的排布行為。

當然 flex 佈局應用於行動端不錯，PC 端需要全相容的話，相容性不夠，此處略過不談。

 

法二：以偽元素及 #text-align:justify

##定義如下HTML 樣式：

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

我們知道，有個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：###############

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

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </p>
</p>

######嘗試在每一塊中間加上一個換行符，結果如下：######

啊哦，还是不行啊。

再寻找原因，原来是出在最后一个元素上面，然后我找到了 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%;
}

发现终于可以了，实现了多列均匀布局：

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

但是一看兼容性，惨不忍睹，只有 IE8+ 和 最新的 chrome 支持 text-align-last 属性，也就是说，如果你不是在使用 IE8+ 或者 最新版的 chrome 观看本文，上面 Demo 里的打开的 codePen 例子还是没有均匀分布。

上面说了要使用 text-align:justify 实现多列布局，要配合 text-align-last ，但是它的兼容性又不好，真的没办法了么，其实还是有的，使用伪元素配合，不需要 text-align-last 属性。

我们给 class="justify" 的 p 添加一个伪元素：

.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 了，增加一个伪元素，效果如下：

通过给伪元素 :after 设置 inline-block 设置宽度 100% ，配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。再多配合几句 hack 代码，可以实现兼容到 IE6+ ，最重要的是代码不长，很好理解。

那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？

原因在于 justify 只有在存在第二行的情况下，第一行才两端对齐，所以在这里，我们需要制造一个假的第二行，而 :after 伪元素正好再适合不过。

最终实现题目初始所示：

以上是CSS全相容的多列均勻佈局問題解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！