關於這個樣式屬性justify

文章 CSS 技術 小鄭搞碼事 小鄭搞碼事 2017-09-10

點擊上方藍字關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

關於css屬性text-align:justify:

先用一句話來理解:只有在存在第二行的情況下,第一行才兩端對齊。

今天這篇文章要說什麼了?當然,如果僅僅是用一個例子,設定個兩行文本,然後證明一下上面這句話的真理性,那就太無聊了。

關於這個樣式屬性justify

今天這篇文章,來聊一下,如果是一行的情況下,我們是如何讓它兩端對齊的。

一、看個現象,同時也驗證一下定義的真實性

代碼如下:

關於這個樣式屬性justify

效果圖如下:

關於這個樣式屬性justify

如上面這張效果圖所示:當不存在第二行的情況下(圖中改變div.container的寬高來模擬),只對div.justify設置text-align:justify,子元素無法實現兩端對齊。這就證明了justify屬性的定義真實性。下面我們來看一下如讓一行的情況下實現兩端對齊。

二、第一種不太好的實現方法

為了解決這個問題,我找到了一個樣式屬性text-align-last,這個屬性規定如何對齊文本的最後一行,並且text-align-last屬性只有在text-align屬性設置為justify時才起作用。來試一把

關於這個樣式屬性justify

結果,效果真的和想象的一樣:

關於這個樣式屬性justify

既然,這個屬性可以解決問題,出於職業性的反應,它的兼容性如何了,如下圖

關於這個樣式屬性justify

慘不忍睹,text-align-last的兼容性不理想,沒法達到實用的目的。往下看。

三、最常用的實現方法

從定義出去,來尋求更好的解決方法。既然是存在第二行情況下,第一行才兩端對齊,那製造一個假的第二行就行了。使用偽元素在適合不過了。

關於這個樣式屬性justify

結果和想象的一樣。

總結:

通過給偽元素:after設置inline-block,設置寬度100%,配合容器的text-align:justify,就可以輕鬆實現多列均勻佈局了。重要的還是記住它的定義。

相關推薦

推薦中...