代码之家 › 专栏 › 技术社区 › eflorico

在两个元素上浮动

css-float internet-explorer-6 xhtml css html

eflorico · 技术社区 · 15 年前

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

我想放一个浮动的元素(蓝色的盒子) 超过两个其他元素 (红色和绿色)我希望整个过程 固定宽度和居中 (由带黑色边框的方框完成)同时 红绿框的背景应填满整个宽度。 .

实际上,我不太确定我现在的做法是否是xhtml/css有效,但它是有效的——至少在firefox中是有效的。在IE6中,绿色框会扩展以适应整个蓝色框——如何在IE6中修复这个问题,或者找到另一个解决方案在所有浏览器中正确显示它?

1 回复 | 直到 13 年前

mercator 15 年前

你可能无法做到这一点,这取决于你的确切意思。

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

请参见“ acidic float tests “用于讨论此特定问题的页面。

如果从 center Div,您会看到它不再包含float,因为它不再具有布局。

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

但是,如果这整件事情成为更复杂设计的一部分,您可能会在无意中不得不向触发布局的行添加属性,因此这仍然是一个不够的解决方案。

在任何情况下,这就是HTML最终的样子,宽度和高度从 中心 班级。我保留了原始结构,并添加了内联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>