MUKI AI Summary
要讓 float 的 DIV 高度相同，可以使用多種方法。即使左邊 DIV 文字較少，仍能隨右邊 DIV 文字增多而調整高度。常見方法包括利用 padding 與 margin 的調整，或使用 display:table 讓 DIV 變成 table 結構。
此外，還有許多其他解決方案可供參考，像是 vanseo design 和 CSS tricks 提供的教程，介紹了多種 CSS 實現相同高度欄的方法，值得深入研究。...
今天同事問我要怎麼讓 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;}延伸閱讀與理論
要解掉同高還有很多方法，有興趣的朋友可以瞭解其他人是如何解決這樣的問題，他們也大方地分享自己的理論以及實際運用的效果：
- 4 Methods For Creating Equal Height Columns In CSS / vanseo design
- Fluid Width Equal Height Columns / CSS tricks
歡迎給我點鼓勵，讓我知道你來過 ：）