絕對定位在任意寬度div中的浮動錯誤

立即查看示例，嘗試調整窗口大小等。

a preview (easier to open in IE this way)

HTML：

<div class="container"> 
    <div class="left-menu"> 
     <ul> 
      <li>El1</li> 
      <li>Element 2</li> 
      <li>3</li> 
     </ul> 
    </div> 
    <div style="margin-right: 60px;">Тест Тест</div> 
</div>

CSS：

.container{ 
    position:absolute; 
    top:100px; 
    left:100px; 

    outline: 1px solid red; 
    background-color:pink; 
} 
.left-menu{ 
    outline: 1px solid green; 
    background-color:#AAA; 

    width: 50px; 
    float: right; 
}

現在我不明白兩件事

float元素會發生什麼？該盒子不會太小，實際上相鄰div的邊距大於ul div的寬度。但是，當窗口足夠小時，浮動元素似乎浮動到窗口邊緣而不是其容器邊緣，但是如果窗口很小時向右滾動一點，則會看到容器足夠寬。
不太重要的問題，爲什麼這是廣泛的？它不應該像內容一樣寬嗎？

我想出的唯一解決辦法是給我絕對div的寬度，但有問題。它應該調整內容的大小，如果在浮動div附近有圖片。

而且會有圖片=）這個寬度的解決方法當然可以使用噸的javascript，調整比例中顯示的結構更復雜的每個元素，但我想知道可以用CSS來代替嗎？

來源

2011-07-19 Olga

「左菜單」類有一個浮右對齊？ – MCSI

yes =）存在代碼片段 – Olga

Internet Explorer的問題與div和浮動，特別是舊版本的IE瀏覽器。每當我遇到漂浮物和div沒有正確清理對方的問題時，我都依靠方法。

將clearfix css添加到您的主css文件，然後將類.clearfix附加到.container，使其看起來像<div class="container clearfix">。

對於內部的2個div，如果您希望這2個div的寬度根據它們內部的內容進行更改，請將它們的邊距和寬度關閉。浮動一個div，並將另一個div浮動。

你會看到Clearfix強制父div（.container）一直圍繞浮動元素內部。

希望這會有所幫助！

來源

2012-10-09 17:27:32

我試圖嚴格按照您的指示進行操作，但它似乎並未影響IE 7 http://fiddle.jshell.net/BXfNJ/17/show/如果我搞砸了，請糾正我的錯誤up something – Olga

啊我明白了。這是因爲IE7需要.container div的寬度。當涉及到浮動時，IE7不知道如何處理父容器。另外，爲了讓你的邊框在IE7中顯示，使用border屬性而不是大綱，最好使用邊框。 –

絕對定位在任意寬度div中的浮動錯誤

回答

相關問題