如何建立具有動態高度調整的穩定的兩列 HTML/CSS 佈局？

微調穩定的兩列HTML/CSS 佈局

簡介：

在

具體要求：

佈局應滿足以下要求：

容器寬度和高度自動調整。
• 容器高度與兩者中較大的高度匹配列。
• 最小容器尺寸是左列寬度的兩倍。
• 列垂直對齊並具有可變高度。
• 即使有邊框，列尺寸和佈局也保持穩定、內邊距或邊距調整。
• 左列具有固定像素寬度。
• 右列寬度填滿剩餘的容器空間，讓 100% 寬度的區塊元素擴展到整個容器。

解：

HTML 結構：

<div>
<p><strong></strong></p>
<pre class="brush:php;toolbar:false">#left {
  width: 200px;
  float: left;
}
#right {
  margin-left: 200px;
}
.clear {
  clear: both;
}

此方法利用CSS 浮動來並排定位列，並使用clearfix hack (.clear) 來防止浮動列折疊容器高度。右列的 margin-left 確保它佔據容器中的剩餘空間。

優點：

• 保持穩定的版面和列尺寸。
• 容器高度依列高度動態調整。
• 處理可變內容和版面優雅地改變。

相容於主流瀏覽器，包括 IE8、Firefox 4 和 Safari 5。