在HTML/CSS 中使兩個浮動Div 高度相同
簡介
簡介實作相等div 的高度可能具有挑戰性，尤其是當它們並排且具有不同內容時長度。一種常見的解決方法是使用表格，但這種方法在語義上可能不合適。
使用 CSS 創建等高 Div要在不使用表格的情況下實現等高，CSS提供了幾種技術。一種方法涉及設置大的底部填充，用負底部邊距否定該填充，並用隱藏溢出的容器包圍 div。
實作
#container {
overflow: hidden;
width: 100%;
}
#left-col {
float: left;
width: 50%;
background-color: orange;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* for IE compatibility */
border-left: 1px solid black;
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}<div>
這種方法本質上強制兩個div具有相同的高度，即使它們包含不同數量的內容。大的底部填充和負邊距相互抵消，允許 div 只佔用它們需要的垂直空間。隱藏溢出的容器確保任何多餘的內容都不可見。
結論這種 CSS 技術提供了一種語義上正確的方法來在 HTML/ 中創建等高浮動 div CSS。它有效地模仿了表格的行為，而不會引入不必要的標記。以上是如何僅使用 CSS 使兩個浮動 div 具有相同的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
