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 之后）。

有谁知道为什么？

编辑：bootstrap css类（span10）导致了这个问题。删除该课程后，它就有效了。

Answer 1

根据您提供的信息判断，我认为这可能取决于您放入的内容。如您所见[{3}}，<hr>显示在div下方，应该如此。

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

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

#my_div {
  overflow: hidden;
}

此类问题还有其他解决方法，但这个问题最容易尝试，以便检查这是否是影响您的问题。

可能影响到你的另一个问题是div的高度限制为400px。如果div的内容超过该高度，则不会将div的边界向下推，而是会溢出（here）。如果是这种情况，您可以将div的height设置为auto，以便它与内容一起延伸，或者您可以通过调整确保内容不会超过div的高度它

Answer 2

引导程序css类（span10）导致此问题。从 my_div 中删除后，它就可以了。

Answer 3

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

Answer 4

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

Answer 5

给你的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 6

我认为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 />');
});

Answer 7

我认为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 />');
});

<div> </div>后面的HTML标记<hr />

7 个答案: