css 多列等高

多列等高

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

需求

設計師說某頁面的新聞介紹，因爲新聞內容不一樣致使顯示區域的高度不一致，現須要使其高度視覺上保持一致。小加同窗以爲必須迅速解決，讓設計師妹妹知道咱們程序師哥哥的威武。原型設計稿大體以下:

bootstrap 柵格系統

思路

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

HTML

<div class="section">
    <h1 class="section__title">第一版</h1>
    <div class="section__items row">
      <div class="section__item col-xs-12 col-sm-6 col-md-4">
        <div class="section__item-wrap">
          <h3>科比狂砍35</h3>
          <p>在火箭對陣湖人的比賽中,科比單節15分,夢迴巔峯狂砍35分~</p>
        </div>
      </div>
      <div class="section__item col-xs-12 col-sm-6 col-md-4">
        <div class="section__item-wrap">
          <h3>勇士72勝</h3>
          <p>今日勇士於馬刺的比賽中,庫裏單節16分的氣勢再也壓不住,末節的柳暗花明,不單單是擁抱72勝的欣喜若狂,也是終結連續33場客負馬刺這一尷尬記錄的仰天長嘯,更是打破塵封20年紀錄的蠢蠢欲動.</p>
        </div>
      </div>
      <div class="section__item col-xs-12 col-sm-6 col-md-4">
        <div class="section__item-wrap">
          <h3>德羅贊得分里程碑</h3>
          <p>猛龍客場挑戰尼克斯,最終93-89打敗對手.此役德羅贊砍下27分,他職業生涯總得分達到9426分,超越文斯-卡特,躍居猛龍隊史得分榜第2位,僅次於克里斯-波什.</p>
        </div>
      </div>
      <div class="section__item col-xs-12 col-sm-6 col-md-4">
        <div class="section__item-wrap">
          <h3>安東尼21+6</h3>
          <p>在尼克斯對陣猛龍的比賽中,安東尼裏突外投,砍得21分6籃板.</p>
        </div>
      </div>
      <div class="section__item col-xs-12 col-sm-6 col-md-4">
        <div class="section__item-wrap">
          <h3>馬刺戰勇士1勝3負</h3>
          <p>馬刺在主場以86-92不敵勇士,遭遇本賽季主場首敗.他們主場連勝紀錄停留在48場,包括創NBA紀錄的開局主場39連勝.</p>
        </div>
      </div>
      <div class="section__item col-xs-12 col-sm-6 col-md-4">
        <div class="section__item-wrap">
          <h3>哈登末節20分</h3>
          <p>在火箭對陣湖人的比賽中,哈登末節20分,大力劈扣轟40+13.</p>
        </div>
      </div>
    </div>
  </div>

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

資源

在線測試

源代碼