国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css 多列等高

sarva / 1653人閱讀

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

多列等高

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

需求

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

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

直接使用bootstrap的col-*來實現(xiàn)這個簡單的布局就OK啦～

HTML 
  

    
初版

    

      

        

          
科比狂砍35

          
在火箭對陣湖人的比賽中,科比單節(jié)15分,夢回巔峰狂砍35分~

        

      

      

        

          
勇士72勝

          
今日勇士于馬刺的比賽中,庫里單節(jié)16分的氣勢再也壓不住,末節(jié)的柳暗花明,不僅僅是擁抱72勝的欣喜若狂,也是終結(jié)連續(xù)33場客負(fù)馬刺這一尷尬記錄的仰天長嘯,更是打破塵封20年紀(jì)錄的蠢蠢欲動.

        

      

      

        

          
德羅贊得分里程碑

          
猛龍客場挑戰(zhàn)尼克斯,最終93-89戰(zhàn)勝對手.此役德羅贊砍下27分,他職業(yè)生涯總得分達到9426分,超越文斯-卡特,躍居猛龍隊史得分榜第2位,僅次于克里斯-波什.

        

      

      

        

          
安東尼21+6

          
在尼克斯對陣猛龍的比賽中,安東尼里突外投,砍得21分6籃板.

        

      

      

        

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

          
馬刺在主場以86-92不敵勇士,遭遇本賽季主場首敗.他們主場連勝紀(jì)錄停留在48場,包括創(chuàng)NBA紀(jì)錄的開局主場39連勝.

        

      

      

        

          
哈登末節(jié)20分

          
在火箭對陣湖人的比賽中,哈登末節(jié)20分,大力劈扣轟40+13.
CSS 
  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
效果圖

吐槽

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





分割線來咯～ 你能夠嘗試著解決這個問題嗎？


clear 清除浮動 思路

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

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中一行的每個格子都是等高的，那么我們可以使用css的display: inline-table來解決這個問題。

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，它能簡單的搞定一切～

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)鍵知識點 
clear


w3school


padding


ipluser


display: inline-table


w3school


flex


ruanyifeng
資源 在線測試 源代碼

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/54316.html

相關(guān)文章

  • css布局：多列等高布局

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

    Ethan815 評論0 收藏0

  • css 多列等高

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

    cncoder 評論0 收藏0

  • 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

發(fā)表評論

0條評論

sarva

男|高級講師

TA的文章

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