Question

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

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

任何想法如何使用css？我不能在这里使用表格，因为在主页面（ASP.NET）中添加了div＃up，在内容中添加了div＃down。 Div＃parent是液体，有一些min-width设置，包含不应该被这些div重叠的内容，所以我认为position：absolute在这里也是不可能的。

还有一个细节：在div＃parent的左侧和右侧，剩余的div使用菜单左右浮动。所以添加清楚：left / right to div＃down floated right将它放在其中一个菜单中......

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>

Answer 3

我个人会将它们包装在一个容器div中，并给它一个宽度并将其向右浮动。

#sidebar{
  width: 250px;
  float: right;
}

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

3 个答案: