您好,登錄后才能下訂單哦!
這篇文章主要介紹css中div+css布局實(shí)現(xiàn)2端對(duì)齊的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
div+css布局實(shí)現(xiàn)2端對(duì)齊是我們網(wǎng)頁(yè)排版中經(jīng)常會(huì)使用到的,這篇文章將總結(jié)一下可以實(shí)現(xiàn)的方法:
html結(jié)構(gòu)
實(shí)現(xiàn)demo里面的div通過(guò)Css進(jìn)行2端對(duì)齊。
<div class="box"> <div class="demo"> <div>1</div> <div>2</div> <div>3</div> </div> </div>
1.margin負(fù)值的方式
該方法需要外面多嵌套一層來(lái)實(shí)現(xiàn),通過(guò)元素的間距,做為中間層的margin溢出值來(lái)實(shí)現(xiàn)
<style> .box{ width:300px;margin:auto;overflow:hidden;border:1px solid #ddd; } .box .demo{ margin-left:-10px;width:310px } .box .demo div{ width:93.333px;/*(計(jì)算:(300-10*2)/3)*/ float:left; margin-left:10px; } </style>
2.display:inline-block/text-align:justify方式
justify方式比較簡(jiǎn)單方便。只要一個(gè)簡(jiǎn)單元素做了聲明,里面的元素就自動(dòng)等間距兩端對(duì)齊布局啦!根本無(wú)需計(jì)算每個(gè)列表元素間的margin間距,更不用去修改父容器的寬度。
注意一點(diǎn):demo結(jié)構(gòu)內(nèi)元素必須存在【換行符】或【空格符】,否則直接連著寫將不會(huì)生效
<style> .demo{ margin:0;padding:0; text-align:justify; text-align-last:justify;/*解決IE的支持*/ line-height:0;/*解決標(biāo)準(zhǔn)瀏覽器容器底部多余的空白*/ } @media all and (-webkit-min-device-pixel-ratio:0){ .demo{ font-size:0;/*webkit清除元素中使用[換行符]或[空格符]后,最后元素多余的空白*/ } } .demo:after{/*text-align-last:justify只有IE支持,標(biāo)準(zhǔn)瀏覽器需要使用 .demo:after 偽類模擬類似效果*/ display:inline-block; overflow:hidden; width:100%; height:0; content:''; vertical-align:top;/*opera瀏覽器解決底部多余的空白*/ } .demo div{ width:20%; display:inline-block; text-align:center;/*取消上層元素的影響*/ text-align-last:center; font-size:12px; } </style>
3.css3 屬性 space-between
該方法基于webkit內(nèi)核的webapp開發(fā)和winphone IE10及以上,常用于移動(dòng)端布局。
<style> .demo{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; } .demo div{ width:30%; } </style>
4.css3屬性column-count
column屬性是多列布局,使用column來(lái)實(shí)現(xiàn)兩端對(duì)齊只需要設(shè)置模塊的個(gè)數(shù)跟column的列數(shù)一致即可,推薦使用于移動(dòng)端布局
<style> .demo{ -webkit-column-count:3;-moz-column-count:3;column-count:3; -webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px; } .demo div{ } </style>
以上是“css中div+css布局實(shí)現(xiàn)2端對(duì)齊的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。