css multi-column high

Contour multi-column

Columns of varying height high fashion layout.

demand

He said the designer introduced a page of news, due to the different news content results in a highly inconsistent display area, now need to be consistent on a highly visual. Small plus students feel compelled to quickly resolve, let us know designer sister programmers brother's mighty. Prototyping is issued as follows:

bootstrap grid system

Thinking

Directly bootstrap the col- * to achieve this simple layout to 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;
  }

Renderings

Make complaints

What happens, a line of three, two, it looks too messy, designer certainly be subject to contempt of ~ must prostitution technology to solve this problem, designers sister worship brother -





the dividing line to slightly ~ you can try to solve the problem?

---

clear Clear float

Thinking

Because of their different content news high degree of inconsistency, the card element left floating in the maximum height of the right can be used clear: left;to solve this problem.

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;
    }
  }

Renderings

padding + position

Thinking

Referring to width ratio Higher irregular elements , estimated height range, using paddingattribute complete -

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%;
    }
  }

Renderings

table

Thinking

tableEach row of the grid is high, then we can use the css display: inline-tableto solve this problem.

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;
  }

Renderings

flexbox

Thinking

Use artifact flexbox, it's simple to get everything ~

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;
  }

Renderings

The key knowledge points

clear

w3school

padding

ipluser

display: inline-table

w3school

flex

ruanyifeng

Resources

online test

Source

This article is reproduced in: Ape 2048 CSS multi-column high