浮动在两个元素上

Question

我的问题解释起来相当复杂，所以我给你举个例子： http://ewolf.bplaced.de/misc/float.htm

我希望将一个浮动元素（蓝色框）放置在其他两个元素（红色和绿色）上，并且我希望整个元素都是固定宽度和居中（由带有黑色边框的框完成）而红色和绿色框的背景应该填满整个宽度。

实际上我不太确定我现在的做法是否适用于 XHTML/CSS，但它可以工作——至少在 Firefox 中是这样。在 IE6 中，绿色框会展开以适应整个蓝色框 - 我如何在 IE6 中解决此问题或找到其他解决方案以在所有浏览器中正确显示它？

Answer 1

您可能无法做到这一点，具体取决于您的意思。

它不起作用的原因是 IE6 神奇的hasLayout 属性。任何在 IE6 中具有“布局”的元素都将包含其浮动。布局由宽度或高度等 CSS 属性触发。有关详细信息，请参阅链接文章。

有关讨论此特定问题的页面，请参阅“acidic float tests”。

如果您从center div 中删除宽度和高度，您将看到它不再包含浮动，因为它不再具有布局。

当然，你最终得到的并不是你想要的。您可以通过在两行周围添加一个包装器 div 并在其上设置宽度来处理宽度。如果您也想要固定高度，您可以在每一行内添加一个额外的 div（作为第一行中蓝色框的兄弟）并设置高度。

但是，如果整个事情成为更复杂设计的一部分，您可能会无意中最终不得不向触发布局的行添加属性，因此这可能仍然不足以解决问题。

无论如何，这就是 HTML 最终的样子，宽度和高度从 center 类中删除。我保留了原始结构并添加了内联 CSS 来演示更改：

<div style="width: 800px">
    <div id="row1">
        <div class="center">
            <div id="box">
                Lorem ipsum ...
            </div>
            <div style="height: 100px">
                Duis autem ...
            </div>
        </div>
    <div id="row2">
        <div class="center" style="height: 100px">
            Duis autem ...
        </div>
    </div>
</div>