第一種:border

解說:利用中間欄位的border-left與border-right來實現視覺上的等高效果，但缺點很明顯:「左右兩邊內容超出中間欄位時，會露出」

<!-- html -->
<div class="box">
  <div class="left">
    <p>test string!</p>
  </div>
  <div class="center">
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="right">
    <p>test string!</p>
  </div>
</div>

/* Css */
.box {
  position:realtive;
}
.left,.right {
  position: absolute;
  top: 0;
  width: 300px;
}
.left {
  left: 0;
  text-align: right;
}
.right {
  right: 0;
}
.center {
  border-left: 300px solid #cd0000;
  border-right: 300px solid #036;
  background-color: #0fa;
  text-align: center;
}

點這裡看codepen

第二種: 負margin

解說:利用特大padding-bottom增加尺寸(高度)，再用負的margin-bottom把後面的元素給拉上來!

<!-- html -->
<div class="box">
  <div class="item left">
    <p>test string!</p>
  </div>
  <div class="item center">
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item right">
    <p>test string!</p>
  </div>
</div>

/* Css */
.box {
  overflow: hidden;
}
.item {
  float: left;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
.left {
  background: #036;
}
.center {
  width: 50%;
  background: #0fa;
}
.right {
  background: #cd0000;
}
.left,.right {
  width: 25%;
}

點這裡看codepen

第三種: table-cell

解說:table-cell本身就是等高，所以可以用table-cell來達成真的等高的效果。

<div class="box">
  <div class="item left"><p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item center">
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item right">
    <p>test string!</p>
  </div>
</div>

.box {
  display: table;
  width: 100%;
  table-layout: fixed;
  box-shadow: 0 0 1px #cd0000;
  text-align:center;
}
.item {
  display: table-cell;
}

.center {
  background: #0fa;
}
.right {
  background: #cd0000;
}
.left {
  background: #036;
}

點這裡看codepen

第四種:absolute

解說:利用absolute的top與bottom稱滿父元素高度，達成等高效果。(所有的html配置都一樣，就直接PO上CSS了!)
缺點也是很明顯，因為子元素依靠absolute來拉稱高度的關係，父元素要有高度才行，子元素自己本身也不能自
行擴充高度。

.box {
  position: relative;
  padding-bottom: 300px;
}
.item {
  position: absolute;
  text-align: center;
  top: 0;
  bottom: 0;
}
.left {
  left: 0;
  right: 70%;
  background: #036;
}
.right {
  right: 0;
  left: 70%;
  background: #cd0000;
}
.center {
  left:30%;
  right:30%;
  background: #0fa;
}

點這裡看codepen

第五種:flex

解說:利用橡皮筋的彈性盒子本身的特性，來達成等高了效果。

<div class="box">
  <div class="item left">
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item center">
    <p>test string!</p>
    <p>test string!</p>
    <p>test string!</p>
  </div>
  <div class="item right">
    <p>test string!</p>
  </div>
</div>

.box {
  display:flex;
}

.item {
  width: 0;
  flex:1;
  margin: 0 auto;
  text-align: center;
}
.left {
  background: #036;
}
.right {
  background: #cd0000;
}
.center {
  background: #0fa;
}

點這裡看codepen

心得

主要寫這篇做個CSS的筆記，如何達成等高的效果，除了上面這五種方式外，也可以使用grid來實現，或是利用js來控制元素的高度
。上面這五種最大的分別就是「視覺上」、「實際上」的等高與瀏覽器的兼容性，像是首兩種border與負margin就屬於視覺上的等高，看起來是一樣高的，但其實只是利用視覺上的呈現來讓人覺得是等高的!而table-cell與flex實現的就是天然的等高。