怎么在CSS3中實(shí)現(xiàn)瀑布流布局

發(fā)布時(shí)間：2021-05-08 16:22:14 來源：億速云閱讀：369 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在CSS3中實(shí)現(xiàn)瀑布流布局，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

　　CSS3實(shí)現(xiàn)瀑布流布局具體步驟：

　　1.設(shè)置外部容器多列列數(shù)（column-count）和列間距（column-gap）

　　2.設(shè)置內(nèi)容條目的break-inside屬性為avoid，使條目總體不被打斷。

　　CSS3實(shí)現(xiàn)瀑布流布局結(jié)構(gòu)

　　HTML結(jié)構(gòu)：

　　復(fù)制代碼

　　<divclass="container">//最外層容器

　　<divclass="item">//條目

　　<divclass="item__content">//條目內(nèi)容

　　<imgsrc=''>

　　</div>

　　<divclass="item">

　　<divclass="item__content">

　　<imgsrc=''>

　　</div>

　　.........

　　</div>

　　復(fù)制代碼

　　css樣式：

　　復(fù)制代碼

　　.container{

　　column-count:4;//多列的列數(shù)

　　column-gap:0;//列間距

　　}

　　.item{

　　break-inside:avoid;//避免在主體框中插入任何中斷（頁面，列或區(qū)域）。

　　}

上述就是小編為大家分享的怎么在CSS3中實(shí)現(xiàn)瀑布流布局了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

猜你喜歡