多列等高布局。主要是視覺(jué)效果。可以利用float/table/display:flex等技術(shù)來(lái)實(shí)現(xiàn)。

初始時(shí)，多個(gè)列內(nèi)容大小不同，高度不同。現(xiàn)在需要設(shè)置不同的背景來(lái)顯示，而且各個(gè)列的高度需要保持一致。那么這就需要利用到多列等高布局。

最終需要的效果：

1. 真實(shí)等高布局 flex

技術(shù)點(diǎn)：彈性盒子布局flex，默認(rèn)值就是自帶等高布局的特點(diǎn)。

定義flex布局的時(shí)候，有一些默認(rèn)值。

flex-direction 屬性定義主軸的方向。默認(rèn)值為row，一般是水平顯示。flex容器的主軸被定義為與文本方向相同。 主軸起點(diǎn)和主軸終點(diǎn)與內(nèi)容方向相同。

align-item屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸 或者說(shuō) 交叉軸）方向上的對(duì)齊方式。默認(rèn)值為 stretch，元素被拉伸以適應(yīng)容器。

<div class="box">

  <div class="left"></div>

  <div class="center"></div>

  <div class="right"></div>

</div>

css

.box {

  display: flex;

}

.left {

  width: 300px;

  background-color: grey;

}

.center {

  flex: 1;

  background: red;

}

.right {

  width: 500px;

  background: yellow;

}

See the Pen equal-hight-layout-flex by weiqinl (@weiqinl) on CodePen.

2. 真實(shí)等高布局 table-cell

技術(shù)點(diǎn)：table布局天然就具有等高的特性。

display設(shè)置為table-cell，則此元素會(huì)作為一個(gè)表格單元格顯示。類似于使用標(biāo)簽<td>或者<th>。

HTML結(jié)構(gòu)

<div class="box">

  <div class="left"></div>

  <div class="center"></div>

  <div class="right"></div>

</div>

CSS樣式

.left {

  display: table-cell;

  width:30%;

  background-color: greenyellow;

}

.center {

  display: table-cell;

  width:30%;

  background-color: gray;

}

.right {

  display: table-cell;

  width:30%;

  background-color: yellowgreen;

}

See the Pen equal-hight-layout-table by weiqinl(@weiqinl) on CodePen.

3. 假等高列布局 內(nèi)外邊距底部正負(fù)值

實(shí)現(xiàn)：設(shè)置父容器的overflow屬性為hidden。給每列設(shè)置比較大的底內(nèi)邊距，然后用數(shù)值相似的負(fù)外邊距消除這個(gè)高度。

• 不考慮可擴(kuò)展性，只需要將padding-bottom/margin-bottom ，設(shè)置為最高列與最低列相差高度值，就可以得到等高效果。

• 考慮擴(kuò)展性，為了防止將來(lái)可能某列高度大量的增加或減少，所有，我們?cè)O(shè)置了一個(gè)比較大的值。

技術(shù)點(diǎn)

1. background 會(huì)填充內(nèi)邊距 padding，而不會(huì)填充外邊距 margin 。margin具有坍塌性，可以設(shè)置負(fù)值。

2. float:left。使用float，元素會(huì)脫離文檔流，使其浮動(dòng)至最近的文檔流元素。在這里的作用是，將三個(gè)div元素并排。

3. overflow:hidden; 設(shè)置overflow屬性為hidden，這樣會(huì)讓父容器產(chǎn)生BFC（Block Fromatting Context塊級(jí)格式化上下文）效果，消除float帶來(lái)的影響。同時(shí)，根據(jù)需要，會(huì)截取內(nèi)容以適應(yīng)填充框，將超出容器的部分隱藏。

HTML結(jié)構(gòu)

<div class="box">

  <div class="left"></div>

  <div class="center"></div>

  <div class="right"></div>

</div>

CSS

.box {

  overflow: hidden;

}

.box > div{

  /**

  * padding-bottom 設(shè)置比較大的正值。

  * margin-bottom 設(shè)置絕對(duì)值大的負(fù)值。

  **/

  padding-bottom: 10000px;

  margin-bottom: -10000px;

  float:left;

  width:30%;

}

.left {

  background-color: greenyellow;

}

.center {

  background-color: gray;

}

.right {

  background-color: yellowgreen;

}

See the Pen equal-height-layout-padding-margin-bottom by weiqinl(@weiqinl) on CodePen.

4. 假等高布局，背景視覺(jué)效果

技術(shù)點(diǎn)： float浮動(dòng)，并設(shè)置每一列的寬度。設(shè)置父元素為行內(nèi)塊級(jí)元素，之后再利用線性漸變的圖片來(lái)設(shè)置父元素的背景凸顯等高的效果。

CSS linear-gradient函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。

display: inline-block，設(shè)置為行內(nèi)塊級(jí)元素。

  <div class="box five-columns">

    <div class="col"></div>

    <div class="col"></div>

    <div class="col"></div>


    <div class="col"></div>

    <div class="col"></div>

</div>

css

/** 需要自己算出平均每列的寬度 */

.box {

  display: inline-block;

  background: linear-gradient(

    to right, 

    red, 

    red 20%,

    blue 20%,

    blue 40%,

    yellow 40%,

    yellow 60%,

    orange 60%,

    orange 80%,

    grey 80%,

    grey);

} 

.col {

  float: left; 

  width: 16%;

  padding: 2%;

}

See the Pen equal-height-layout-float-fluid-width by weiqinl (@weiqinl) on CodePen.

github源碼
[完]