今天同事問我要怎麼讓 float 的 DIV 可以有相同高度?
亦即,即使左邊的 DIV 文字行數比較少,也會因為右邊 DIV 的行數變多而調整自己的高度。
上網搜尋研究了一下,其實有好多種方式可以滿足這個條件,甚至二欄、三欄部落格也有用類似的概念。
#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; }
#container { overflow: hidden; display:table; width: 100%; color: #000; } .row {display:table-row;} .row div {display: table-cell;}
要解掉同高還有很多方法,有興趣的朋友可以瞭解其他人是如何解決這樣的問題,他們也大方地分享自己的理論以及實際運用的效果: