讓 float 的 div 高度相同

今天同事問我要怎麼讓 float 的 DIV 可以有相同高度? 亦即,即使左邊的 DIV 文字行數比較少,也會因為右邊 DIV 的行數變多而調整自己的高度。
上網搜尋了一下、研究了一下,其實有好多種方式可以滿足這個條件,甚至二欄、三欄部落格也有用類似的概念。

利用 padding 的填充與 margin 的消除


#container {
  overflow: hidden;
  width: 100%;
  color: #000;
}
#left-col {
  float: left;
  width: 50%;
  background-color: #eee;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* For IE */
  background-color: #369;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

See the Pen NNWLvM by MUKi (@mukiwu) on CodePen.

使用 display:table ,讓 div 變成 table

#container {
  overflow: hidden;
  display:table;
  width: 100%;
  color: #000;
}
.row {display:table-row;}
.row div {display: table-cell;}

See the Pen qZBMpb by MUKi (@mukiwu) on CodePen.

延伸閱讀與理論

要解掉同高還有很多方法,有興趣的朋友可以瞭解其他人是如何解決這樣的問題,他們也大方地分享自己的理論以及實際運用的效果:
1.4 Methods For Creating Equal Height Columns In CSS / vanseo design
2.Fluid Width Equal Height Columns / CSS tricks