html - 有没有一种优雅的方法可以将一个块浮动到它左侧的块中

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 个块，右侧被 div 包裹的另一个块。

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

更不用说它本身很糟糕，但问题是左边的块可能不存在，在这种情况下，蓝色的应该像正常流程一样行事。

有任何想法吗？

score 3 · Accepted Answer

考虑到您的局限性，我认为您的解决方案并不可怕。我会简单地做：

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

在这种情况下，整体将在不存在#outer_b时按照正常流程放置，否则将被放置在（视觉上）的内部#outer_a#outer_a

score 2 · Accepted Answer

我对您的小提琴进行了更新：

这是更新后的 CSS：

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

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

只有在后面跟着.left时才会应用样式。尝试删除小提琴中的第一个块，看看魔术:)#outer_a#outer_bdiv

编辑：我明白了，在我一直使用百分比的地方，宽度#outer_b不会根据您的要求而改变。我认为没有比marign-left:-Ypx;满足特定要求更漂亮的解决方案了。

2 回答 2