Question

这很奇怪;我正在指定DIV的height，但浏览器似乎在其上方显示其他DIV。一个例子是http://jsfiddle.net/x48v4/。

我尝试明确指定display: block;但没有骰子。还尝试指定min-height，但这也不起作用。我读了一个涉及clear: both;的有希望的技巧，但这也无济于事。

在JSFiddle示例中，我只想让红色DIV直接显示在蓝色DIV下面。感谢您提供的任何帮助！

<html>
<body style="font-family: arial, helvetica, sans-serif; font-size: 11pt; font-weight: bold; line-height: 1.5;">

<div style="width: 300px; text-align: center; margin: 0px auto;">

    <div style="height: 300px; background: #9999ff;">
        <br>
        This DIV has a blue background and is 300px tall.&nbsp; I want the red DIV below to display underneath this blue header.<br>
        &nbsp;
    <div>

    <div style="background: #ff5555;">
        But instead, this DIV is "superimposed" over the blue DIV's background-&nbsp; why is that?<br>
        I want this to be underneath the blue DIV instead.
    <div>

</div>

</body>
</html>

Answer 1

也将此作为答案发布。对于这两个框，div没有正确关闭。

这是更新后的代码：

<html>
<body style="font-family: arial, helvetica, sans-serif; font-size: 11pt; font-weight: bold; line-height: 1.5;">

<div style="width: 300px; text-align: center; margin: 0px auto;">

    <div style="height: 300px; background: #9999ff;">
        <br>
        This DIV has a blue background and is 300px tall.&nbsp; I want the red DIV below to display underneath this blue header.<br>
        &nbsp;
    </div>  <!-- closed the div here -->

    <div style="background: #ff5555;">
        But instead, this DIV is "superimposed" over the blue DIV's background-&nbsp; why is that?&nbsp; I want this to be underneath the blue DIV instead.
    </div>  <!-- closed the div here -->

</div>

</body>
</html>

试图显示固定高度的DIV。为什么随后的DIV显示在固定高度的DIV上？

1 个答案: