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覆蓋兩個元素

回答

相關問題