css布局：多列等高布局

Ethan815 發布于2019-08-29 15:05 / 2021人閱讀

摘要：多列等高布局是在一個容器里面，并排的多列，如果內容的高度無法在一開始確定例如內容是動態的，又需要讓各列自然地撐開不出現每列里面的滾動條，這時候需要用或者的方法把各列高度設置為最高列的高度。

多列等高布局是在一個容器里面，并排的多列，如果內容的高度無法在一開始確定（例如內容是動態的），又需要讓各列自然地撐開（不出現每列里面的滾動條），這時候需要用css或者js的方法把各列高度設置為最高列的高度。這里我們介紹純css實現方法。

程序代碼：


　　
　　　　
　　　　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;
}

可以看到出現這樣三列：因為內容區域的大小不同導致高度不同。如果內容區域是動態的，我們也不能夠直接把高度都設置成最高的那列。

這時候，我們給col增加樣式：

padding-bottom: 500px;

出現的效果是：紅色代表父元素，藍色代表子元素原來的內容，也就是父元素和子元素都因為padding被撐開了。

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

這時候，相當于三個子元素都超出父元素邊界500px，也就是父元素的border-bottom往上移動500px，剛好到了最長元素的內容區域。

這時候再給父元素設置overflow:hidden就可以把黃色下面的區域隱藏掉，實現三列等高布局。

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

GPU云服務器云服務器 css布局 css布局教程學習css布局 div布局布局html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113086.html

css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

lijinke666 2019-08-29 11:22 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

hedge_hog 2019-08-20 11:16 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

kun_jian 2019-08-01 15:45 評論0 收藏0
前端面試重點之——多列布局

摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

lei___ 2019-08-02 15:33 評論0 收藏0
前端面試重點之——多列布局

摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

superPershing 2019-08-23 18:40 評論0 收藏0