2011-04-22 71 views
2

這一個真的讓我的山羊。我需要將Container1和Container2浮動到右側,並讓它們像現在一樣互相碰撞。我還需要將Container2內的物品浮動到右側,以便彼此堆疊。問題是如果我在Container2中設置了任何內容(示例文本2,示例文本3)向右浮動,它使Container2寬度爲100%或其他東西。ie7浮動右父寬度問題

這可以通過給Container2一個特定的寬度來解決,但這是不可能的,因爲所有這些都是動態內容。我需要Container2的增長,因爲我在裏面堆疊東西。

有沒有辦法解決這個問題?這只是ie7中的一個問題,所有其他瀏覽器似乎都沒問題。這讓我發瘋。

<div> 
    <div style="width: 100px; height: 100px; background: green; float: left;"> 
    </div> 
    <div id="Container1" style="height: 100px; border: 1px solid #000000; float: right;"> 
     sample text 1 
    </div> 
    <div id="Container2" style="height: 100px; border: 1px solid #000000; float: right;"> 
     <div style="float: right; border: 1px solid #FF0000;">sample text 2</div> 
     <div style="float: right; border: 1px solid #00FF00;">sample text 3</div> 
    </div> 
</div> 
+0

我認爲你需要'

'。 – Blender2011-04-22 22:44:23

回答

5

我無法找到一個解決這個錯誤在Internet Explorer 7

有可能是一個,我不知道。我嘗試了所有常用的技巧。

這是一些利用display: inline-block重做的代碼。

它在IE8中看起來與your old code相同,並且在IE7/8和其他現代瀏覽器中一致。好極了!

參見:http://jsfiddle.net/SUPhf/

有許多的事情需要注意的:

現在您瞭解這些警告的,這應該是罰款。

+1

感謝您的提示。這是一個恥辱,即7要求我們得到這個東西hacky。不能等到我再也不必爲那個pos編程了。 – theDawckta 2011-04-23 07:55:06