如何创建具有动态高度调整的稳定的两列 HTML/CSS 布局？

微调稳定的两列 HTML/CSS 布局

简介：

在 HTML/CSS 中设计稳定的两列布局需要仔细考虑几个因素，包括列尺寸、高度调整，以及布局对变化和内容变化的弹性。

具体要求：

布局应满足以下要求：

• 容器宽度和高度自动调整。
• 容器高度与两者中较大的高度匹配列。
• 最小容器尺寸是左列宽度的两倍。
• 列垂直对齐并具有可变高度。
• 即使有边框，列尺寸和布局也保持稳定、内边距或边距调整。
• 左列具有固定像素宽度。
• 右列宽度填充剩余的容器空间，允许 100% 宽度的块元素扩展到整个容器。

解决方案：

HTML 结构：

<div>
<p><strong>CSS样式：</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。