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

資訊專欄INFORMATION COLUMN

css 多列等高

cncoder / 1796人閱讀

摘要:多列等高高度不一的列以等高方式布局。需求設計師說某頁面的新聞介紹,由于新聞內容不同導致顯示區域的高度不一致,現需要使其高度視覺上保持一致。

多列等高

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

需求

設計師說某頁面的新聞介紹,由于新聞內容不同導致顯示區域的高度不一致,現需要使其高度視覺上保持一致。小加同學覺得必須迅速解決,讓設計師妹妹知道我們程序師哥哥的威武。原型設計稿大致如下:

bootstrap 柵格系統 思路

直接使用bootstrap的col-*來實現這個簡單的布局就OK啦~

HTML
  

初版

科比狂砍35

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

勇士72勝

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

德羅贊得分里程碑

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

安東尼21+6

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

馬刺戰勇士1勝3負

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

哈登末節20分

在火箭對陣湖人的比賽中,哈登末節20分,大力劈扣轟40+13.

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

吐槽

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





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


clear 清除浮動 思路

由于內容不同的新聞其高度不一致,使元素左浮動卡在高度最大的右邊,可以使用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 思路

參照不規整元素的寬高等比例,預估高度范圍,使用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;
  }
效果圖

關鍵知識點

clear

w3school

padding

ipluser

display: inline-table

w3school

flex

ruanyifeng

資源 在線測試 源代碼

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

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

相關文章

  • css布局:多列等高布局

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

    Ethan815 評論0 收藏0
  • css 多列等高

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

    sarva 評論0 收藏0
  • css table布局大法,解決你大部分居中、多列等高、左右布局的問題

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

    lijinke666 評論0 收藏0
  • css table布局大法,解決你大部分居中、多列等高、左右布局的問題

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

    hedge_hog 評論0 收藏0
  • css table布局大法,解決你大部分居中、多列等高、左右布局的問題

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

    kun_jian 評論0 收藏0

發表評論

0條評論

cncoder

|高級講師

TA的文章

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