Question

我有一个div，它将保留一些内容，我将在下面复制div几次。

当我多次重复div时，我看到内容相互重叠而不是堆叠。

在检查时，我可以看到未设置容器的高度。是否根据div内的内容设置高度？我受到了这种印象，不知道我现在在哪里。

<div class="row">
<div class="col-md-5">
<div class="Mycontainer">
    <div class="Item1">
        <img src="http://placehold.it/150x150" class="Pic">
    </div>
    <div class="Item2">
        <img src="http://placehold.it/150x150" class="Pic">
    </div>
</div>
<div class="Mycontainer">
    <div class="Item1">
        <img src="http://placehold.it/150x150" class="Pic">
    </div>
    <div class="Item2">
        <img src="http://placehold.it/150x150" class="Pic">
    </div>
</div>
</div>
</div>

非常感谢阅读和解决。 ;）

Answer 1

问题似乎是在包装器上设置position:absolute。这将完全从文档的语义流中删除您的内容，剩余的内容将流向顶部以填补空白，从而实现“重叠”效果。

Here's a Fiddle 您position:absolute;注释掉的情况。

如果您想并排浮动每个容器中的图像而不指定父容器的高度you need to apply overflow:hidden to the parent。

Answer 2

你实际上有几个不同的问题。你的div出现在另一个而不是堆叠的原因是因为你在使用position: absolute;时指定了position: relative;。

Answer 3

您是否尝试将其position属性更改为position: absolute，这样就不会将其与另一个进行网格划分？您可能需要创建其他div以获得您要查找的结果。我希望我有所帮助！

相同的div不堆叠而是重叠

3 个答案: