是否有一种优雅的方法可以将一个块浮动到它左边的块中

Question

描述有点令人困惑，但我没有看到如何更好地解释它的方法。

示意性地看起来像

，布局定义为

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

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

jsfiddle demo：http://jsfiddle.net/D3Ftp/

我需要一个解决方案，帮助青色块在黄色块之后立即显示，使其看起来像

结果。

限制：无法更改布局。好吧，允许进行微小的更改，但是应该有 - 2个块由左边的div包裹，另一个块包裹在右边的div中。

我的解决方案非常糟糕 - 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;更漂亮的解决方案。