Question

我在这里有一些看起来像这样的html代码：

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red;">Alpha</div>
    <div id="B" style="margin-top: 20px; Background-color: Green;">Bravo</div>
  </body>
</html>

我想要实现的是右上角的A div和页面顶部左侧20像素的B div。正如你在下面看到的，它在IE8中完全符合我的要求，但它在Chrome和Firefox中并不适用。

enter image description here

因为经常出现这种情况，我认为Chrome和FF是正确的，因此IE8不符合标准。所以我的问题是如何在所有浏览器中获得所需的结果（IE在SS中做了什么）？

EDIT1＆amp; 2：我编辑了截图，表明我真的希望Bravo div位于Alpha div 的左侧，但是低20px 而不是像我只是添加它一样一个明确的：正确的布拉沃。

由于

Answer 1

修改
回答新问题：

<div id="A" style="float:right; background-color: Red; margin-top: -5px;">Alpha</div> <div id="B" style="margin-top: 20px; background-color: Green;">Bravo</div>

<强> ORIGINAL
（问题作者最初问过这个，后来改变了问题......）

将clear: right;添加到B div的样式中。（可选）使用clear: both;。并将div A包装成这样的包装div：

<div id="wrapper" style="overflow: hidden;"> <div id="A" style="float:right; background-color: Red;">Alpha</div> </div> <div id="B" style="margin-top: 50px; background-color: Green; clear: right;">Bravo</div>

Answer 2

试试这个：

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red;">Alpha</div>
    <div id="B" style="float:right; margin-top: 50px; Background-color: Green; clear:right; width:100%;">Bravo</div>
  </body>
</html>

添加了：

float:right; clear:right;和width:100%;至#B

查看实际操作 - http://jsfiddle.net/SHubq/

Answer 3

您必须添加clear CSS rule。

在您的两个divs
之间添加
<div style="clear: both" />。（注意：在您的情况下，只有clear: right有效）

或

以clear: both样式添加div id="B"。（注意：在您的情况下，只有clear: right有效）

编辑：请参阅此小提琴中的两个案例http://jsfiddle.net/dyGyu/

Answer 4

在b的div样式中添加clear属性，使用最适合相关网站的属性。

比如both，所以你什么都得不到。

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red; ">Alpha</div>
    <div id="B" style="margin-top: 50px; Background-color: Green; clear: both;">Bravo</div>
  </body>
</html>

如何防止浮动的div继承他兄弟的边缘？

4 个答案: