css - 列溢出主 div 元素

Question

我试图用三列设置我的主页(每个列的高度可能不同，具体取决于内容)，但出于某种原因，我的“内容”div 中的列不符合它。这会导致列溢出到下面的信息上。我尝试使用定位创建相同的布局，因为我了解它是更好的做事方式；但是我没有运气。

我尝试使用“溢出”元素，它确实考虑了列，但它随后在内容元素上放置了一个滚动条。

请看我的工作示例here

1. 为什么这样做？ (编辑)- 明白了

2. 我怎样才能让列位于 内容元素并尊重文档的流程？ (编辑)- 已解决

3. 您能否建议一种更好的方法，比如使用定位？我使用的方法是最好的定位方式，还是应该使用相对、静态等？

Answer 1

1. 内容将溢出其边界框，除非您使用 overflow: hidden (或类似)在某些情况下；见overflow and clipping在 CSS2 规范中

2. 由于您要 float 三列，因此需要使用类似 Clearfix 的内容这样列容器之后的内容就会清除它们。 (或者，您可以在包含页脚内容的 clear: both 上设置 <p>。)

3. float 是处理多列的常用方法，因此您的方向是正确的。定位几乎肯定不会在这里帮助你。