Float覆盖两个元素

我的问题是相当复杂的解释，所以我会告诉你一个例子： http://ewolf.bplaced.de/misc/float.htm Float覆盖两个元素

我想有一个浮动元素（蓝框）被放置超过两其他元素（红色和绿色），我想整个事情是固定宽度和中心（由箱体与黑色边框做了），而红色和绿色框的背景应该充满全宽。

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

来源

2009-11-09 eWolf

问题载入页面...您的服务器似乎已经进入睡眠状态。没有看到你想要做什么，很难想象。 :( – MalphasWats 2009-11-09 21:11:38

这是一个免费的托管商，所以它可能不太可靠，但目前它适用于我 – eWolf 2009-11-09 22:04:16

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

它不工作的原因是因为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>

来源

2009-11-09 21:58:41 mercator

Float覆盖两个元素

回答

相关问题