點擊上方藍字關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
關於css屬性text-align:justify:
先用一句話來理解:只有在存在第二行的情況下,第一行才兩端對齊。
今天這篇文章要說什麼了?當然,如果僅僅是用一個例子,設定個兩行文本,然後證明一下上面這句話的真理性,那就太無聊了。
今天這篇文章,來聊一下,如果是一行的情況下,我們是如何讓它兩端對齊的。
一、看個現象,同時也驗證一下定義的真實性
代碼如下:
效果圖如下:
如上面這張效果圖所示:當不存在第二行的情況下(圖中改變div.container的寬高來模擬),只對div.justify設置text-align:justify,子元素無法實現兩端對齊。這就證明了justify屬性的定義真實性。下面我們來看一下如讓一行的情況下實現兩端對齊。
二、第一種不太好的實現方法
為了解決這個問題,我找到了一個樣式屬性text-align-last,這個屬性規定如何對齊文本的最後一行,並且text-align-last屬性只有在text-align屬性設置為justify時才起作用。來試一把
結果,效果真的和想象的一樣:
既然,這個屬性可以解決問題,出於職業性的反應,它的兼容性如何了,如下圖
慘不忍睹,text-align-last的兼容性不理想,沒法達到實用的目的。往下看。
三、最常用的實現方法
從定義出去,來尋求更好的解決方法。既然是存在第二行情況下,第一行才兩端對齊,那製造一個假的第二行就行了。使用偽元素在適合不過了。
結果和想象的一樣。
總結:
通過給偽元素:after設置inline-block,設置寬度100%,配合容器的text-align:justify,就可以輕鬆實現多列均勻佈局了。重要的還是記住它的定義。
相關推薦
'「實況聯盟」屬性暴漲!20賽季馬內這是要封神?'
"本文原創,非經授權謝絕轉載註冊位置:左邊鋒評分變化:86+3=89等級上限:25滿級評分:90+5=95滿級數據:攻擊能力+4、控球+5、盤球+4、緊密控球94、空傳+2、射門+5、頭球+11、定位球+2、速度+2、爆發+1、腳下力量+3、跳躍+9、身體接觸+1、身體控制...
'南寧市人民政府、南寧警備區 關於在全市試鳴防空警報的通告'
"根據《中華人民共和國人民防空法》《廣西壯族自治區實施〈中華人民共和國人民防空法〉辦法》規定,以及《廣西壯族自治區人民防空和邊海防辦公室關於組織開展全區防空警報統一試鳴暨人民防空指揮部實戰化演練的通知》(桂防通〔2019〕85號)要求,為增強全體市民的國防觀念和防空意識,提...
'關於洗牙的常見誤區 我們需要知道'
"提起洗牙,想必很多人都不會覺得陌生,但是對於大多數口腔健康的人來講,他們覺得自己並不需要洗牙,大多數人都認為只有牙齒出現一些牙齒疾病的時候,才需要去醫院進行洗牙治療,而且大多數人對於洗牙的認知,都覺得洗牙會損傷牙齒,洗完牙會導致牙縫變大等一系列牙齒問題,其實這些對於洗牙的...
'一開學就包書皮?關於書皮不得不說的那些事,家長都知道嗎?'
"文 | 小微談育兒(文章原創 ,版權歸本作者所有,歡迎個人轉發分享)孩子包書皮彷彿成為了一種時尚,每個人都會選擇自己喜歡的樣式、圖案、風格等,來為自己的新書“穿”上嫁衣。然而書皮卻能引發許多問題,家長們卻不知道。前兩天瞭解到一個新聞,說的是幾個月前,一位父親錄製了題為“父...
'關於“如何成為一個更好的人?”的100 條真誠建議 '
"分享一篇文章《2019年,如何成為一個更好的人?我們給出100條真誠建議》,文章分享了關於“如何成為一個更好的人?”的100 條真誠建議 。 想成為更好的自己,就去試試吧!(資料來源:我們讀書吧微博)"
文章
2019-09-14
推薦中...