这很奇怪；我正在指定一个 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. I want the red DIV below to display underneath this blue header.<br>
<div>
<div style="background: #ff5555;">
But instead, this DIV is "superimposed" over the blue DIV's background- why is that?<br>
I want this to be underneath the blue DIV instead.
<div>
</div>
</body>
</html>
最佳答案
也将此作为答案发布。 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. I want the red DIV below to display underneath this blue header.<br>
</div> <!-- closed the div here -->
<div style="background: #ff5555;">
But instead, this DIV is "superimposed" over the blue DIV's background- why is that? I want this to be underneath the blue DIV instead.
</div> <!-- closed the div here -->
</div>
</body>
</html>
关于css - 试图显示固定高度的 DIV。为什么后续的 DIV 显示在固定高度的 DIV 之上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20730607/