CSS 使用 div 创建列布局答案

【问题标题】：CSS Create Column Layout with DivsCSS 使用 div 创建列布局
【发布时间】：2011-11-30 22:18:52
【问题描述】：

所有，我想要的是有一个带有容器 div 的两列布局。左边的列可以是固定长度，这样就可以了。然后右侧的列将需要填写容器 div 的其余部分。我遇到的另一个问题是右边的列可以比左边的列有更多的数据。如何使左列的背景或边框动态化，使其始终与右列的高度相同？感谢您对此提出的任何建议。

【问题讨论】：

【解决方案1】：

这是一篇好文章，他使用了三列但原理相同http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks希望对您有所帮助！

【讨论】：

【解决方案2】：

你可以使用 CSS 做到这一点，只需像这样以百分比形式给出两个 div 的宽度：

<div class="main">
  <div class="leftCol"></div>
  <div class="rightCol"></div>
</div>

和css：

.leftCol{
 float:left;
 width:20%;
}
.rightCol{
 float:left;
 width: 80%;
}

祝你好运！

【讨论】：

这个 CSS 不起作用。您需要浮动 div + 他需要将 leftCol 固定宽度，而且 main 已经具有 100% 的宽度，因为它是一个块元素并且不需要 100% 声明。而且他需要等高的柱子。
@easwee：感谢您的评论，我编辑了我的答案。虽然我同意你的看法，但我的示例不会修复左侧 div 的固定宽度......最好的方法是使用 JavaScript
不是真的 - 可以用纯 css 完成 - 请参阅 SGB 答案，这是解决此问题的典型方法。