Html 两个 div 一个浮动在另一个上面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3415635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two divs floating right one above another
提问by Episodex
I'm trying to put two divs on the right side of parent div one above another. Something like this:
我试图将两个 div 放在父 div 的右侧，一个在另一个上方。像这样的东西：
div#top
|-------------------------------------||------------|
|div#parent ||div#menu |
| |---------|||float:right |
| |div#up ||| |
| | ||| |
| |---------|||------------|
| |
| |---------||
| |div#down ||
| | ||
| |---------||
|-------------------------------------|
Any ideas how to do it using css? I can't use tables here because div#up is added in Master page (ASP.NET) and div#down is added in content. Div#parent is liquid with some min-width set and contains content that should not be overlapped by these divs so i think position:absolute is out of question here too.
任何想法如何使用css来做到这一点？我不能在这里使用表格，因为 div#up 是在母版页 (ASP.NET) 中添加的，而 div#down 是在内容中添加的。Div#parent 是带有一些最小宽度设置的液体，并且包含不应与这些 div 重叠的内容，所以我认为 position:absolute 在这里也是不可能的。
One more detail: on the left and right of div#parent there ale divs floated left and right with menus. So adding clear:left/right to div#down floated right puts it under one of these menus...
还有一个细节：在 div#parent 的左侧和右侧，有 ale divs 左右浮动，带有菜单。因此，将 clear:left/right 添加到 div#down floated right 会将其置于这些菜单之一下...
采纳答案by RoToRa
You need to make sure that the parent block (#parentin your case) becomes the block formatting context of the divs #upand #down, so that any clearing only happens inside that block formatting context and ignores the floats outside of it. The easiest way to do this usually is to either let #parentfloat, too, or give it an overflowother than visible.
您需要确保父块（#parent在您的情况下）成为 div#up和的块格式化上下文#down，以便任何清除仅发生在该块格式化上下文内，而忽略其外部的浮点数。最简单的方法通常是让#parent浮动，或者给它一个overflow除了visible.
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Here some proof, that I got it right this time: http://jsfiddle.net/Pagqx/
这里有一些证据，我这次做对了：http: //jsfiddle.net/Pagqx/
Sorry for the confusion.
对困惑感到抱歉。
回答by a'r
You need to use both float:rightand clear:right, which ensures that the right-hand side of the element is unobstructed to the edge of the containing element.
您需要同时使用float:rightand 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>
回答by David Yell
Personally I would wrap them in a container div, and give it a width and float it right.
就我个人而言，我会将它们包装在一个容器 div 中，并给它一个宽度并使其正确浮动。
#sidebar{
width: 250px;
float: right;
}
