資訊專欄INFORMATION COLUMN
摘要：多列等高布局是在一個容器里面，并排的多列，如果內容的高度無法在一開始確定例如內容是動態(tài)的，又需要讓各列自然地撐開不出現(xiàn)每列里面的滾動條，這時候需要用或者的方法把各列高度設置為最高列的高度。
多列等高布局是在一個容器里面，并排的多列，如果內容的高度無法在一開始確定（例如內容是動態(tài)的），又需要讓各列自然地撐開（不出現(xiàn)每列里面的滾動條），這時候需要用css或者js的方法把各列高度設置為最高列的高度。這里我們介紹純css實現(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..
這時候用浮動布局讓三個col并列：
.col {
float: left;
width: 33.33%;
padding: 20px;
color: #fff;
text-align: center;
background: #2980b9;
}
可以看到出現(xiàn)這樣三列：因為內容區(qū)域的大小不同導致高度不同。如果內容區(qū)域是動態(tài)的，我們也不能夠直接把高度都設置成最高的那列。
這時候，我們給col增加樣式：
padding-bottom: 500px;
出現(xiàn)的效果是：紅色代表父元素，藍色代表子元素原來的內容，也就是父元素和子元素都因為padding被撐開了。
這時，再給col增加樣式
margin-bottom: -500px;
這時候，相當于三個子元素都超出父元素邊界500px，也就是父元素的border-bottom往上移動500px，剛好到了最長元素的內容區(qū)域。
這時候再給父元素設置overflow:hidden就可以把黃色下面的區(qū)域隱藏掉，實現(xiàn)三列等高布局。
多列等高布局的一個解決思路就是：先給幾個子元素設置一個比較大的padding-bottom和一個等值的負數(shù)margin-bottom，也就是相當于在父元素溢出了，這時候再從父元素那里設置overflow:hidden，就可以裁剪掉溢出的部分。并且是最高的元素溢出最多，這時候隱藏掉溢出的部分，并行的列就都等高了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/113086.html
摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...
摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...
摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...
摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。 在頁面開發(fā)中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發(fā)中常見多列布局問題的解決方法。按列數(shù)可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。 目錄 一、定寬+...
摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。 在頁面開發(fā)中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發(fā)中常見多列布局問題的解決方法。按列數(shù)可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。 目錄 一、定寬+...
閱讀 2322·2021-11-22 09:34
閱讀 2191·2021-09-22 15:22
閱讀 2086·2019-08-29 15:05
閱讀 2179·2019-08-26 10:43
閱讀 3465·2019-08-26 10:26
閱讀 1050·2019-08-23 18:29
閱讀 3623·2019-08-23 16:42
閱讀 2058·2019-08-23 14:46
