漂浮在两个元素上-Java 学习之路

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

我希望有一个浮动元素（蓝色框）放置 over two other elements （红色和绿色），我希望整个事情是 fixed-width and centered （由带有黑色边框的框完成），同时 the background of the red and green box should fill the whole width .

我实际上不太确定我现在的方式是XHTML / CSS有效，但它有效 - 至少在Firefox中 . 在IE6中，绿色框扩展为适合整个蓝色框 - 如何在IE6中修复此问题或找到另一个解决方案在所有浏览器中正确显示？

1 回答

0
根据你的意思，你可能无法做到这一点 .

它没有't work is because of IE6'属性的原因 . 在IE6中具有"layout"的任何元素都将包含其浮点数 . 布局由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>
```
回复于 2024-05-15T16:22:24+08:00

漂浮在两个元素上

1 回答

相关问题