css - 两个 div 一个 float 在另一个上方

Question

我试图将两个 div 放在父 div 的右侧，一个放在另一个之上。像这样:

 div#top 
|-------------------------------------||------------|
|div#parent                           ||div#menu    |
|                          |---------|||float:right |
|                          |div#up   |||            |
|                          |         |||            |
|                          |---------|||------------|
|                                     |
|                          |---------||
|                          |div#down ||
|                          |         ||
|                          |---------||
|-------------------------------------|

关于如何使用 css 做这件事有什么想法吗？我不能在这里使用表格，因为在母版页 (ASP.NET) 中添加了 div#up，在内容中添加了 div#down。 Div#parent 是流动的，设置了一些最小宽度，并且包含不应被这些 div 重叠的内容，所以我认为 position:absolute 在这里也没有问题。

更多细节:在 div#parent 的左侧和右侧，带有菜单的 ale div 左右浮动。因此，将 clear:left/right 添加到 div#down floated right 将其置于这些菜单之一下...

Answer 1

您需要确保父 block (在您的情况下为 #parent)成为 div #up 和 #down< 的 block 格式化上下文，以便任何清除只发生在该 block 格式化上下文中，而忽略它之外的 float 。最简单的方法通常是让 #parent 也 float ，或者给它一个 overflow 而不是 visible。

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

这里有一些证据，证明我这次做对了:http://jsfiddle.net/Pagqx/

抱歉造成混淆。