新聞中心
這篇文章主要講解了“CSS兩端對(duì)齊怎么實(shí)現(xiàn)”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“CSS兩端對(duì)齊怎么實(shí)現(xiàn)”吧!
靜樂(lè)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書未來(lái)市場(chǎng)廣闊!成為創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:028-86922220(備注:SSL證書合作)期待與您的合作!
flex
彈性盒模型flex作為強(qiáng)大的彈性布局方式,可以hold住大部分的布局效果,當(dāng)然也包括兩端對(duì)齊??梢允褂弥鬏S對(duì)齊justify-content
的兩端對(duì)齊屬性space-between
justify-content: space-between;
如果要考慮flex三個(gè)版本的兼容,則使用如下代碼
[注意]IE9-瀏覽器不支持
.justify-content_flex-justify{ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
- 內(nèi)容
- 樣式
- 行為
text-align
水平對(duì)齊text-align
本身就有一個(gè)屬性值是兩端對(duì)齊justify
。但是,要注意的是,使用它實(shí)現(xiàn)兩端對(duì)齊,需要注意在元素之間添加空白符(包括空格、換行符、制表符)才起作用。由于HTML結(jié)構(gòu)中,元素之間存在換行,所以不需要額外添加空白符
但僅僅是這樣,元素也無(wú)法實(shí)現(xiàn)兩端對(duì)齊效果
元素必須占滿一行才行,如下所示。占滿一行的元素可以實(shí)現(xiàn)兩端對(duì)齊,沒(méi)有占滿的則無(wú)法實(shí)現(xiàn)
【text-align-last】
顯然,上面的情況都不符合要求,這時(shí)就需要使用屬性text-align-last
,該屬性用來(lái)規(guī)定如何對(duì)齊文本的最后一行
于是把text-align
屬性替換成text-align-last
。但是,要兼容IE瀏覽器需要同時(shí)設(shè)置text-align:justify
[注意]safari瀏覽器、IOS、androis4.4-瀏覽器不支持
- 內(nèi)容
- 樣式
- 行為
【after偽元素】
使用text-align-last
可以實(shí)現(xiàn)兩端對(duì)齊的效果,但是兼容性并不好。通過(guò)給父元素設(shè)置偽元素:after
,并為偽元素設(shè)置inline-block
,并設(shè)置寬度100%,相當(dāng)于偽元素:after
被擠到第二行。從而使原來(lái)的元素占滿了第一行,觸發(fā)了兩端對(duì)齊的效果
這里要注意的是,因?yàn)榭瞻讜?huì)被解析為換行,所以可以通過(guò)設(shè)置父元素的高度height
,并溢出隱藏,來(lái)解決多余的換行問(wèn)題
- 內(nèi)容
- 樣式
- 行為
column
使用多列布局column
也可以實(shí)現(xiàn)類似的效果。column-count
定義了元素的列數(shù),例子中有3個(gè)子元素,所以定義為3列。特別要注意的是,這時(shí)需要把子元素設(shè)置為block元素才會(huì)生效
[注意]IE9-瀏覽器不支持
- 內(nèi)容
- 樣式
- 行為
如果子元素之間需要使用豎線,且豎線高度與子元素高度相同時(shí),使用column-rule
可方便的實(shí)現(xiàn)需求
- 內(nèi)容
- 樣式
- 行為
感謝各位的閱讀,以上就是“CSS兩端對(duì)齊怎么實(shí)現(xiàn)”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)CSS兩端對(duì)齊怎么實(shí)現(xiàn)這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
本文題目:CSS兩端對(duì)齊怎么實(shí)現(xiàn)
地址分享:http://fisionsoft.com.cn/article/pssspp.html