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代码的情况下说出发生的事情有点困难，但我会说你的问题是条目的内容是浮动的，然后条目不会扩展为包含它们。

尝试使用：

.entry{

    overflow: hidden;

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

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

自动高度div后继续文档流程

1 个答案: