css浮動故障排除

我有一個非常簡單的CSS示例，詳細如下。 .entry類生成一個帶有1px黑色邊框的簡單框。下面的示例將在框中呈現「123」，並在框外呈現「abc」和「xyz」，因爲這些元素用左右浮動標記。我的目標是讓.box1裏面的.entry左對齊，而.box2裏面的.entry右對齊。css浮動故障排除

<html> 
<head> 
<style type="text/css"> 
     .entry 
    { 
     width: 400px; 
     border-style: solid; 
     border-width: 1px; 
     border-color: #000; 
    } 
    .box1 
    { 
     width: 75px; 
       float: left; 
    } 

    .box2 
    { 
     width: 300px; 
       float: right; 
    } 
</style> 
</head> 
<body> 
     <div class="entry"> 
      123 
      <div class="box1">abc</div> 
      <div class="box2">xyz</div> 
     </div> 
</body> 
</html>

它呈現罰款IE而不是Firefox的

來源

2009-05-29 NoCarrier

看起來好像沒什麼問題 - 不我期望的......也許一些截圖來看看你的意思。這臺電腦上沒有IE。 – 2009-05-29 08:05:23

由於漂浮物被取出正常流量以外，它們周圍的箱子會摺疊。

我將首先解釋它爲什麼在IE中工作。您已通過在每個元素上設置寬度或高度來給它「佈局」。在這種情況下，它是width。有關更多信息，請參閱hasLayout。這非常方便，因爲它還可以解決您遇到的大多數其他IE錯誤。

神奇的子彈是：

 
height: 1%; /* or any other value. IE6 wrongly sees height as min-height. */

，或者如果你是不是在設置一個特定尺寸的位置，使用

 
zoom: 1; /* A IE only property. Doesn't validate, but doesn't cause any harm either */

所以，你的問題，使得它在工作適當的瀏覽器，有幾個解決方案。如果您將浮動元素的父級設置爲float，則該框會圍繞兒童浮標拉伸。儘管這可能會給DOM帶來更多麻煩，但我不知道其餘的標記是如何的。

一個更簡單的方法可以設置overflow:hidden;也可以修復它。但是現在你必須留意長URL，代碼片段或其他任何可能意外推出div的內容。如果你自己做整個網站，這通常不是一個大問題，如果你把它交給某個用於CMS的人，機會可能會稍大。如果你無法解決佈局周圍的無數浮動問題，仍然值得冒險。

在最後添加一個元素以清除浮動元素也是一種做法，但我發現前者更容易。

我最好停止張口閉口，你可能想看到代碼：

 

.entry { 
    width: 400px; 
    border: 1px solid #000; 
    float: left;  /* Option 1 */ 
    overflow: hidden; /* Option 2 */ 
} 
.box1 { 
    width: 75px; 
    float: left; 
} 
.box2 { 
    width: 300px; 
    float: right; 
}

來源

2009-05-29 09:22:52 Eystein

既然你沒有文檔類型，你正在引發Quirks mode。這使得瀏覽器顯得更具有bug，然後是標準（AKA嚴格）模式。 Internet Explorer是這裏最嚴重的罪犯。

我懷疑你的問題是你想讓.entry的邊框擴展到.box1和.box2。請參閱containing floats瞭解更多詳細信息，Methods for Containing Floats獲取更好的解決方案。

當然，您的問題可能會有所不同。 You were rather vague。

來源

2009-05-29 08:19:50 Quentin

你需要清除的float FF：

.entry:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
}

我會做的IE瀏覽器，以及：

.entry { min-height: 10px;}

否則，我不明白爲什麼這是行不通的。 ..

來源

2009-05-29 08:41:19 Jason

試試這個;我已經測試過它，它在FF 3，Safari 3.2，Opera 9.6和IE 7中工作。

（我在.box2 div中添加額外的文本行的原因是爲了確保.entry div可以垂直拉伸額外的內容被添加）。

<html> 
<head> 
<style type="text/css"> 
    .entry 
    { 
     width: 400px; 
     border-style: solid; 
     border-width: 1px; 
     border-color: #000; 
    } 
    .box1 
    { 
     width: 75px; 
     float: left; 
    } 

    .box2 
    { 
     width: 300px; 
     float; left; 
     margin: 0 0 0 75px; 
    } 

    .entry span 
    { 
     width: 400px; 
     float: left; 
    } 
</style> 
</head> 
<body> 
     <div class="entry"> 
      <span>123</span> 
      <div class="box1">abc</div> 
      <div class="box2">xyz<br>More text</div> 
     </div> 
</body> 
</html>

來源

2009-05-29 08:52:56

你仍然需要清理你的花車... – Jason 2009-05-29 08:59:15

嘗試增加溢出：隱藏（或自動）.entry {...}

來源

2009-05-29 10:30:37 Mic

css浮動故障排除

回答

相關問題