隐藏的 <hr> HTML 标记<div>

Question

我有以下HTML代码：

<div id="my_div" style="height:400px"></div>
<hr>
<input type="text" id="my_input">

my_div稍后将填充数据（通过jQuery），但问题是

<hr>

出现在my_div之后，但my_input是它应该在的位置（即，在my_div之后）。

有人知道为什么吗？

编辑：引导css类（span10）导致了此问题。在我去掉那个班后，它起了作用。

Answer 1

给您的div一个position: relative值

<div id="my_div" style="height:400px; position: relative;"></div>

仅出于测试目的，我会给你的CSS一个!important的声明，只是为了排除任何javascript/bootstrap覆盖

<div id="my_div" style="height:400px !important; position: relative !important;"></div>

Answer 2

引导css类（span10）导致了此问题。从my_div中删除后，它就工作了。

Answer 3

从您提供的信息来看，我认为这可能取决于您放入其中的内容。正如您在这里看到的，<hr>显示在div下面，这是应该的。

我能想到的一种可能导致这种情况的情况是，如果你在div中插入使用CSS浮动的内容。在这种情况下，div将"收缩"到它包含的最后一个流中（非浮动）元素的高度，如果里面没有非浮动元素，它将收缩到0的高度。

如果是这种情况，那么您可以通过在#my_div:中添加以下CSS来解决这个问题

#my_div {
  overflow: hidden;
}

对于这类问题，也有其他解决方法，但为了检查这是否是影响你的问题，这个方法最容易尝试。

---

另一个可能影响您的问题是div的高度被限制为400px。如果div的内容超过了这个高度，它不会向下推div的边界，而是会溢出（快速演示）。如果是这种情况，您可以将div的height设置为auto，使其与内容一起拉伸，也可以通过调整内容来确保内容不会超过div的高度

将两者的位置设置为相对位置，并查看它们是否正确显示

这是因为div的固定高度为400px。它可能被内容溢出，但它不能将其他块移动到超过其指定高度的位置。可能您需要将其设置为min-height: 400px而不是height: 400px。

没有内容的div显示为height=0。尝试插入

  

在div内部，这样它最初显示为400px的高度。

我认为jquery首先删除您的"my_div"，然后追加到您的容器中。尝试这个修复

<div id="yourContainer">
            <div id="my_div" style="height:400px"></div>
            <hr>
        </div>
$(document).ready(function() {
    $('#yourContainer').find('hr').remove();
    $('#yourContainer').append('<hr />');
});