html - float 在两个元素上

Question

我的问题解释起来相当复杂，所以我将向您展示一个示例: http://ewolf.bplaced.de/misc/float.htm

我想将一个 float 元素(蓝色框)放置在另外两个元素(红色和绿色)之上，我希望整个元素是固定宽度和居中(由带有黑色边框的框完成)而红色和绿色框的背景应该填满整个宽度.

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

Answer 1

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

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

请参阅“acidic float tests”以获取讨论此特定问题的页面。

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

当然，你最终得到的并不是你想要的。您可以通过在两行周围添加一个包装器 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>