Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

今天同事問我要怎麼讓 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;
}

使用 display:table ,讓 div 變成 table

#container {
  overflow: hidden;
  display:table;
  width: 100%;
  color: #000;
}

.row {display:table-row;}
.row div {display: table-cell;}

延伸閱讀與理論

要解掉同高還有很多方法,有興趣的朋友可以瞭解其他人是如何解決這樣的問題,他們也大方地分享自己的理論以及實際運用的效果:

歡迎給我點鼓勵,讓我知道你來過 :)

Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments