css 多列等高

sarva 發(fā)布于2019-08-02 15:54 / 1666人閱讀

摘要：多列等高高度不一的列以等高方式布局。需求設(shè)計(jì)師說(shuō)某頁(yè)面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺上保持一致。

多列等高

高度不一的列以等高方式布局。

需求

設(shè)計(jì)師說(shuō)某頁(yè)面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺上保持一致。小加同學(xué)覺得必須迅速解決，讓設(shè)計(jì)師妹妹知道我們程序師哥哥的威武。原型設(shè)計(jì)稿大致如下:

bootstrap 柵格系統(tǒng) 思路

直接使用bootstrap的col-*來(lái)實(shí)現(xiàn)這個(gè)簡(jiǎn)單的布局就OK啦～

HTML

  
    初版
    
      
        
          科比狂砍35
          在火箭對(duì)陣湖人的比賽中,科比單節(jié)15分,夢(mèng)回巔峰狂砍35分~
        
      
      
        
          勇士72勝
          今日勇士于馬刺的比賽中,庫(kù)里單節(jié)16分的氣勢(shì)再也壓不住,末節(jié)的柳暗花明,不僅僅是擁抱72勝的欣喜若狂,也是終結(jié)連續(xù)33場(chǎng)客負(fù)馬刺這一尷尬記錄的仰天長(zhǎng)嘯,更是打破塵封20年紀(jì)錄的蠢蠢欲動(dòng).
        
      
      
        
          德羅贊得分里程碑
          猛龍客場(chǎng)挑戰(zhàn)尼克斯,最終93-89戰(zhàn)勝對(duì)手.此役德羅贊砍下27分,他職業(yè)生涯總得分達(dá)到9426分,超越文斯-卡特,躍居猛龍隊(duì)史得分榜第2位,僅次于克里斯-波什.
        
      
      
        
          安東尼21+6
          在尼克斯對(duì)陣猛龍的比賽中,安東尼里突外投,砍得21分6籃板.
        
      
      
        
          馬刺戰(zhàn)勇士1勝3負(fù)
          馬刺在主場(chǎng)以86-92不敵勇士,遭遇本賽季主場(chǎng)首敗.他們主場(chǎng)連勝紀(jì)錄停留在48場(chǎng),包括創(chuàng)NBA紀(jì)錄的開局主場(chǎng)39連勝.
        
      
      
        
          哈登末節(jié)20分
          在火箭對(duì)陣湖人的比賽中,哈登末節(jié)20分,大力劈扣轟40+13.

CSS

  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }

效果圖

吐槽

什么情況，一行三個(gè)、二個(gè)，這看起來(lái)太亂了，肯定會(huì)遭設(shè)計(jì)師鄙視的～必須采用淫技解決這個(gè)問題，讓設(shè)計(jì)師妹妹崇拜哥～

分割線來(lái)咯～你能夠嘗試著解決這個(gè)問題嗎？

clear 清除浮動(dòng) 思路

由于內(nèi)容不同的新聞其高度不一致，使元素左浮動(dòng)卡在高度最大的右邊，可以使用clear: left;來(lái)解決這個(gè)問題。

CSS

  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
  @media (min-width: 768px) {
    .section-revision--clear .section__item:nth-child(odd) {
      clear: left;
    }
  }
  @media (min-width: 992px) {
    .section-revision--clear .section__item:nth-child(odd) {
      clear: none;
    }
    .section-revision--clear .section__item:nth-child(4) {
      clear: left;
    }
  }

效果圖

padding + position 思路

參照不規(guī)整元素的寬高等比例，預(yù)估高度范圍，使用padding屬性完成～

CSS

  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
  @media (min-width: 768px) {
    .section-revision--padding .section__item {
      position: relative;
      padding-top: 25%;
    }

    .section-revision--padding .section__item-wrap {
      position: absolute;
      top: 0;
      margin: 5px;
    }
  }
  @media (min-width: 1200px) {
    .section-revision--padding .section__item {
      position: relative;
      padding-top: 20%;
    }
  }

效果圖

table 思路

table中一行的每個(gè)格子都是等高的，那么我們可以使用css的display: inline-table來(lái)解決這個(gè)問題。

CSS

  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
  .section-revision--table .section__items {
    display: table-row;
  }
  .section-revision--table .section__item {
    display: inline-table;
    float: none;
  }

效果圖

flexbox 思路

使用神器flexbox，它能簡(jiǎn)單的搞定一切～

CSS

  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
  .section-revision--flex .section__items {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

效果圖

關(guān)鍵知識(shí)點(diǎn)

clear

w3school

padding

ipluser

display: inline-table

w3school

flex

ruanyifeng

資源 在線測(cè)試 源代碼

GPU云服務(wù)器云服務(wù)器等高三列等高等高線多列數(shù)據(jù)

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

sarva

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

用conda安裝tensorflow

閱讀 1003·2023-04-26 01:47
新網(wǎng)：雙11上云嘉年華,.com域名低至16元/首年;.cn域名低至8.8元/首年

閱讀 1683·2021-11-18 13:19
css如何實(shí)現(xiàn)n宮格布局?

閱讀 2050·2019-08-30 15:44
前端動(dòng)畫專題（三）：撩人的按鈕特效

閱讀 665·2019-08-30 15:44
CSS那些事兒

閱讀 2306·2019-08-30 15:44
側(cè)邊欄的固定與自適應(yīng)原來(lái)是這樣實(shí)現(xiàn)的（持續(xù)更新）

閱讀 1242·2019-08-30 14:06
布局方法一

閱讀 1429·2019-08-30 12:59
垂直居中

閱讀 1907·2019-08-29 12:49

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

css 多列等高

初版

科比狂砍35

勇士72勝

德羅贊得分里程碑

安東尼21+6

馬刺戰(zhàn)勇士1勝3負(fù)

哈登末節(jié)20分

相關(guān)文章

css布局：多列等高布局