css布局：多列等高布局

Ethan815 發(fā)布于2019-08-29 15:05 / 2027人閱讀

摘要：多列等高布局是在一個(gè)容器里面，并排的多列，如果內(nèi)容的高度無法在一開始確定例如內(nèi)容是動(dòng)態(tài)的，又需要讓各列自然地?fù)伍_不出現(xiàn)每列里面的滾動(dòng)條，這時(shí)候需要用或者的方法把各列高度設(shè)置為最高列的高度。

多列等高布局是在一個(gè)容器里面，并排的多列，如果內(nèi)容的高度無法在一開始確定（例如內(nèi)容是動(dòng)態(tài)的），又需要讓各列自然地?fù)伍_（不出現(xiàn)每列里面的滾動(dòng)條），這時(shí)候需要用css或者js的方法把各列高度設(shè)置為最高列的高度。這里我們介紹純css實(shí)現(xiàn)方法。

程序代碼：


　　
　　　　
　　　　Trend
　　      The tool refers to periodic trends for collecting and analyzing weak signals and trends in chemistry.
　　
　　
　　　　
　　　　User
　　　　User namespaces are now fully implemented as of document is obsolete.
　　
　　
　　　　
　　　　Picture
　　　　Taking good pictures is something anyone can do with any camera, if you practice enough and avoid some common mistakes..

這時(shí)候用浮動(dòng)布局讓三個(gè)col并列：

.col {
　　float: left;
　　width: 33.33%;
　　padding: 20px;
　　color: #fff;
　　text-align: center;
　　background: #2980b9;
}

可以看到出現(xiàn)這樣三列：因?yàn)閮?nèi)容區(qū)域的大小不同導(dǎo)致高度不同。如果內(nèi)容區(qū)域是動(dòng)態(tài)的，我們也不能夠直接把高度都設(shè)置成最高的那列。

這時(shí)候，我們給col增加樣式：

padding-bottom: 500px;

出現(xiàn)的效果是：紅色代表父元素，藍(lán)色代表子元素原來的內(nèi)容，也就是父元素和子元素都因?yàn)閜adding被撐開了。

這時(shí)，再給col增加樣式
margin-bottom: -500px;

這時(shí)候，相當(dāng)于三個(gè)子元素都超出父元素邊界500px，也就是父元素的border-bottom往上移動(dòng)500px，剛好到了最長元素的內(nèi)容區(qū)域。

這時(shí)候再給父元素設(shè)置overflow:hidden就可以把黃色下面的區(qū)域隱藏掉，實(shí)現(xiàn)三列等高布局。

多列等高布局的一個(gè)解決思路就是：先給幾個(gè)子元素設(shè)置一個(gè)比較大的padding-bottom和一個(gè)等值的負(fù)數(shù)margin-bottom，也就是相當(dāng)于在父元素溢出了，這時(shí)候再從父元素那里設(shè)置overflow:hidden，就可以裁剪掉溢出的部分。并且是最高的元素溢出最多，這時(shí)候隱藏掉溢出的部分，并行的列就都等高了。