0

我有以下 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）导致了这个问题。在我删除该课程后，它起作用了。

4

7 回答 7

1

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

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

如果这是您的情况，那么您可以通过将以下 CSS 添加到您的#my_div:

#my_div {
  overflow: hidden;
}

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

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

于 2013-08-27T16:40:04.780 回答
1

引导 css 类 (span10) 导致了此问题。从my_div中删除它后，它起作用了。

于 2013-08-27T16:46:23.730 回答
0

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

于 2013-08-27T16:33:49.743 回答
0

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

于 2013-08-27T16:29:25.430 回答
0

给你的 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>
于 2013-08-27T16:36:51.387 回答
-1

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

&nbsp;

在 div 内，使其最初显示为 400px 的高度。

于 2013-08-27T16:32:19.060 回答
-1

我认为 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 />');
});
于 2013-08-27T16:34:18.503 回答