Question

注意：为清楚起见，此处的示例标记已大大简化。我在jsfiddle上添加了一个简化但不那么简单的版本。

我有一个双列布局，它通过为主列提供大的余量并将辅助列浮动到其中来工作。两列都可以包含多个框;简化标记是

<div style="width:940px">
    <div style="float:left; width:282px">Secondary box A</div>
    <div style="float:left; width:282px">Secondary box B</div>
    <div style="margin-left:320px; width:602px">Primary box A</div>
    <div style="margin-left:320px; width:602px">Primary box B</div>
</div>

我现在想把几段文字放到主框A和图像中，向右浮动：

<div style="width:940px">
    <div style="float:left; width:282px">Secondary box A</div>
    <div style="float:left; width:282px">Secondary box B</div>
    <div style="margin-left:320px; width:602px">
        <img style="width:215px; height:180px; float:right" ... />
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div style="margin-left:320px; width:602px">Primary box B</div>
</div>

但令我惊讶的是，浮动图像被迫下到最后的辅助盒子。

有没有办法将div内的花车与其外面的花车隔离？或者我是否必须将辅助框包装在一个div中，将主框放在另一个div中，找到一个合适的双列布局，它不会浮动列？

Answer 1

尝试用.leftColumn包裹div div并提供：float:left; clear:left;

Demo

Answer 2

说实话，我和你一样惊讶 - 而且我不确定你的例子中发生了什么。似乎.secondary0正在影响第一个.fakeimg的ypos - 这对我没有任何意义，特别是因为.secondary1不会影响它的ypos。

无论如何，我确实找到了一个修复 - 通过将辅助数据包装到一个额外的div中（因此它们位于一个正确的，完全分离的框中） - 并将浮点数添加到此包装器中：

http://jsfiddle.net/9HLXK/8/

避免层次结构中不同级别的CSS浮动干扰

2 个答案: