两个div一个在另一个上面漂浮

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的左侧和右侧,有两个div使用菜单左右浮动.所以添加清楚:左/右到div#向下浮动右边将它放在这些菜单之一...

Answer 1

您需要确保该母块(#parent你的情况)成为的div块格式化内容中#up和#down,使任何结算只发生在块格式化上下文中,而忽略它的外面的花车.最简单的方法通常是让#parent浮动,或者给它一个overflow以外的visible.

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

这里有一些证明,这次我说得对:http://jsfiddle.net/Pagqx/

对困惑感到抱歉.

Answer 2

您需要同时使用float:right和clear:right,这可确保元素的右侧不受阻碍元素边缘的阻碍.

<div id="parent" style="width: 80%">

    <div id="up"   style="float: right; clear: both;">div with id 'up'</div>
    <div id="down" style="float: right; clear: both;">div with id 'down'</div>
    'parent' div

</div>