Question

这是我的小提琴：http://jsfiddle.net/kasper90/GB7bs/6/ 我希望主div尽可能大，位于切换div的右侧。我怎样才能做到这一点？任何帮助都非常感谢：）

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;
}

Answer 1

Yo应该在主容器中使用width：auto并删除浮动：右边。

这应该是你的css：

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

此致

Answer 2

在我看来，你可以摆脱主要div上的float:right和width:100%，实现你想要的目标。

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

Answer 3

我使用过这个解决方案：

#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;
}

Answer 4

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

右浮动宽度100％不起作用

4 个答案: