Question

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

我希望将一个浮动元素（蓝色框）放在 两个其他元素 （红色和绿色）上，我希望整个事情都是 固定宽度和居中 （由带黑色边框的框完成），而 红色和绿色框的背景应填充整个宽度< / EM>

我实际上不太确定我现在的做法是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>

漂浮在两个元素上

1 个答案: