如何防止浮動的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？

回答

相關問題