正確的浮動寬度100％不起作用

這裏是我的小提琴：http://jsfiddle.net/kasper90/GB7bs/6/ 我希望主div儘可能大，定位到切換div。我該怎麼做？任何幫助，非常感謝:)正確的浮動寬度100％不起作用

HTML：

<div id="toggle"></div> 
<script> 
$(document).click(function() { 
$("#toggle").toggle("slide",{ direction: "left" }, 1000); 
}); 
</script> 
<div id="main"><object data="http://euclidthegame.com/mathexchange/5.svg" type="image/svg+xml"></object></div>

的CSS：

#toggle { 
    float: left; 
    width: 100px; 
    height: 800px; 
    border: 1px solid black; 
    background: #ccc; 
} 
#main { 
    float: right ; 
    width: 100%; 
    height:800px; 
    border: 1px solid black; 
}

來源

2013-06-22 Kasper

它的工作它應該完全相同的方式，因爲你已經設置了'＃因爲'100％+ 100px =超過100％'，所以它不能放在最上面，所以它被壓在你的'＃toggle' div下面。 –

@NickR好的，我明白了，但是我想要的是，儘可能寬的寬度儘可能地不被推到底下。那可能嗎？ – Kasper

是的 - 或者將'＃main' div設置爲'width：auto'，或者同時設置'divs'％寬度值。但請注意，設置「邊框」也會增加元素的總寬度。 –

我已經使用這個解決方案：

#main { 
    position: absolute; 
    height:800px; 
    border: 1px solid black; 
    width: 100%; 
    z-index: 1; 
} 

#toggle { 
    position:absolute; 
    width: 200px; 
    height: 800px; 
    border: 1px solid black; 
    background: #ccc; 
    z-index:2; 
}

來源

2013-11-28 17:56:31 Kasper

-1

#toggle {width:10%;} 
#main {width:89%;}

來源

2013-06-22 20:39:34

這個工作，但如果我點擊切換div，它會隱藏，並在這種情況下，我想要主div是100％。所以我希望它能獲得儘可能寬的寬度而不會被切換到切換div下方。 – Kasper

它看起來對我來說，你可以在你的主要DIV擺脫float:right和width:100%的，並實現你想要的。在主容器和自動去除浮：

http://jsfiddle.net/GB7bs/4/

來源

2013-06-22 20:47:15

hm ..這看起來像是在做伎倆，但是當我添加了我想添加的圖片時，它就像之前一樣：\t http://jsfiddle.net/kasper90/GB7bs/6/ – Kasper

呦應該使用寬度權。

這應該是你的CSS：

#toggle { 
    float: left; 
    width: 100px; 
    height: 800px; 
    border: 1px solid black; 
    background: #ccc; 
} 
#main { 
    height:800px; 
    border: 1px solid black; 
    width: auto; 
}

問候

來源

2013-06-22 20:59:17

它不起作用，請看svg圖像被移動到divs下面：http://jsfiddle.net/kasper90/GB7bs/7/ – Kasper

我想我是爲這個http://jsfiddle.net/kasper90/GB7bs/14/ – Kasper

正確的浮動寬度100％不起作用

回答

相關問題