有沒有一種優雅的方式將一個塊浮動到左側的塊中

Question

該描述有點令人困惑，但我沒有看到如何更好地解釋它的方法。

示意它看起來像

和佈局被定義爲

<div id="outer_a"> 
    <div id="a1"></div> 
    <div id="a2"></div> 
</div> 

<div id="outer_b"> 
    <div id="b"></div> 
</div> 

的jsfiddle演示：http://jsfiddle.net/D3Ftp/

我需要一個解決方案，這將有助於青色塊去在黃色之後，看起來像是

因此。

侷限性：佈局不能改變。那麼，允許有小的變化，但應該有 - 左邊的div包含2個塊，右邊包含另一個塊。

我的解決方案很糟糕 - margin-left: -52px;。

沒有提到它本身是可怕的，但事情是，左邊的塊可能不存在，在這種情況下，藍色的應該像正常流動一樣。

任何想法？

Answer 1

考慮到您的侷限性，我認爲您的解決方案並不可怕。我只想做：

#outer_a + #outer_b { 
    margin-left: -52px;   
} 

在這種情況下，整個#outer_b會根據正常流程時#outer_a不存在或#outer_a將放在裏面（視覺），否則

Answer 2

我做了更新了自己的提琴：

http://jsfiddle.net/D3Ftp/1/

下面是更新後的CSS：

#b { 
    width: 50px; 
    height: 20px; 
    background-color: cyan; 
    position: relative; 
} 

#outer_a ~ #outer_b #b { 
    left:-100%; 
} 

的left風格將只適用，如果#outer_a之後#outer_b。嘗試並刪除第一個div塊小提琴，看魔術:)

編輯： 我看，那個地方我已經使用了百分比的#outer_b寬度不按您的要求而改變。對於那個特定的需求，我認爲沒有比marign-left:-Ypx;更漂亮的解決方案。