html - 在自动高度 div 之后继续文档流

Question

我对 div 定位有疑问。我正在构建一个有点类似于表格的界面，但我是用 div 做的，并且它是用 php 动态填充的。

每个条目都包含在一个类为 .entry 的 div 中。在那个 div 中有一堆较小的 div，它们的高度根据来自 php 的内容而变化。

在每个条目之间我有一个名为 .seperator 的 div，它是一个将条目彼此分开的黑条。

当我在自动填充的 .entry div 之后放置一个分隔符时，分隔栏会浮到 .entry div 后面的顶部。我不确定为什么会这样。我猜这是因为 .entry div 上没有设置高度，但我无法设置高度，因为我需要它根据数据进行扩展。

那么我怎样才能使条目动态调整大小但仍保持在文档流中，以便我可以继续将其他 div 放在它下面？

.entry{
    width:100%;
    font-size:12px;
}
#seperator{
    height:10px;
    width:100%; 
    background-color:black;
}

这两个都嵌套在我的主容器中

#mainContainer{
    border-left-style:solid;
    border-right-style:solid;
    border-width:2px;
    background-color:white;
    width:1000px;
    height:100%;
    margin:0px auto;
}

因此，如果我在条目上设置高度，那么我的分隔符就在我想要的位置。我想我的主要问题是我不知道条目的高度，因为它们是动态生成的。

Answer 1

如果没有看到实际的 HTML 代码，很难说出发生了什么，但我会说你的问题是条目的内容是 float 的，然后条目没有展开以包含它们。

尝试使用这个:

.entry{

    overflow: hidden;

    width:100%;
    font-size:12px;
}

隐藏溢出，您会强制条目扩展到其内部元素的大小，即使它们是 float 的。