成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css布局：多列等高布局

Ethan815 / 2049人閱讀

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

多列等高布局是在一個容器里面，并排的多列，如果內(nèi)容的高度無法在一開始確定（例如內(nèi)容是動態(tài)的），又需要讓各列自然地?fù)伍_（不出現(xiàn)每列里面的滾動條），這時候需要用css或者js的方法把各列高度設(shè)置為最高列的高度。這里我們介紹純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)這樣三列：因為內(nèi)容區(qū)域的大小不同導(dǎo)致高度不同。如果內(nèi)容區(qū)域是動態(tài)的，我們也不能夠直接把高度都設(shè)置成最高的那列。

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

padding-bottom: 500px;

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113086.html

相關(guān)文章

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

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

    lijinke666 評論0 收藏0

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

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

    hedge_hog 評論0 收藏0

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

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

    kun_jian 評論0 收藏0

  • 前端面試重點(diǎn)之——多列布局

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

    lei___ 評論0 收藏0

  • 前端面試重點(diǎn)之——多列布局

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

    superPershing 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<