如何防止浮动的div继承他的兄弟姐妹的margin-top？

我看起来像这样的样本在这里的一些HTML代码：如何防止浮动的div继承他的兄弟姐妹的margin-top？

<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>

我想什么来实现的是在右上角的一个div并从左侧20个像素排列在B DIV页面顶部。正如你可以在下面看到的，它正是我想要的IE8，但它不适用于Chrome和Firefox。

enter image description here

因为这是经常发生的情况，我想Chrome和FF是正确的渲染这种方式与IE8不遵循标准。所以我的问题是如何在所有浏览器中获得所需的结果（SS中的IE是什么）？

EDIT1 & 2：我编辑的屏幕截图，以证明我真正想要的布拉沃格是在阿尔法DIV 左侧，但20像素较低，而不是根据它喜欢它想如果我只需添加一个明确的：正确在布拉沃。

感谢

来源

2011-11-16 Mathieu Pagé

根据编辑：这似乎是完全矛盾的，你原来的问题说明。 – animuson

现在的问题没有道理！ – Alex

对不起，我想我的问题很简单明了。我如何在其他浏览器中实现IE渲染（查看屏幕截图）？ –

编辑
应答传送至新问题：

<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阿成的包装的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>

来源

2011-11-16 15:30:07

我想到了这一点，但它创建了一个奇怪的行为，其中绿色框连接到红色框：http://jsfiddle.net/zP4H5/3/ - 它似乎忽略了边缘顶部？ – animuson

尝试在A div中添加'margin-bottom：50px;'并从B div中移除'margin-top：50px;'。那个怎么样？ –

浮动B并给它的宽度会给你想要的效果。 – Alex

试试这个：

<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/

来源

2011-11-16 15:34:00 Alex

我已经编辑了我的SS和问题以指定我确实需要将Alpha浮动在Bravo的右侧。对不起，我原来的问题没有这样做。 –

你哈已经添加了clear CSS rule。

添加你的两个divs

<div style="clear: both" />之间。（注：在你的情况，只是clear: right作品）

或

在div id="B"样式添加clear: both。（注：在你的情况，只是clear: right作品）

编辑：见这两种情况在这个小提琴http://jsfiddle.net/dyGyu/

来源

2011-11-16 15:35:04

一个clear属性添加到B的DIV的风格，用最适合的网站属性有问题。

比如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>

来源

2011-11-16 15:35:27 BenAshwell

如何防止浮动的div继承他的兄弟姐妹的margin-top？

回答

相关问题