Question

我一直在寻找解决这个问题的时间，但似乎并没有其他人遇到过这个问题。

我有两个div，左边是一个普通（和内联块），另一个很好地漂浮在右边。当我在它们上使用.toggle（）隐藏/显示时，浮动的一个重新出现在其原始位置之下。即使我的所有其他代码都被删除，这个问题仍然存在：

//Html
<div class="tableWrapper">
    <div class="redDiv"></div>
    <div class="greenDiv"></div>
</div>

//Css stuff here:
.tableWrapper{width:100%}
.redDiv, .greenDiv{width:49%; height:150px;}
.redDiv{
    display:inline-block;
    background-color:red;
}
.greenDiv{
    float:right;
    background-color:green;
}

//My two measly jquery calls...
$(" .redDiv").toggle();
$(" .greenDiv").toggle();

或者在JSFiddle上：http://jsfiddle.net/0hxc8rr4/

注意：我尝试更换＆＃34; style.display = stuff＆＃34;要求jQuery，这似乎没有帮助。

Answer 1

jQuery将在您切换后重新定义display属性。您只需将float:left添加到红色块类中即可修复它。或者如上所述，在每次通话后重新定义它。但是，如果你已经浮动了一个元素，那么浮动另一个元素是有意义的。

http://jsfiddle.net/0hxc8rr4/2/

Answer 2

很简单。 jQuery使用display:block显示元素，然后需要一行而不是一个单元格。

您可以自己手动将其切换为inline-block

change slideToggle() behaviour to display:inline-block instead of display:block?

(jQuery) Toggle div style "display:none" to "display:inline"

在你的情况下，你应该在第一个div上使用float:left。

http://jsfiddle.net/v1etme23/1/

.redDiv{
    display:inline-block;
    background-color:red;
    float:left;
}

Answer 3

仅在Mac Chrome（不是Safari或Firefox）上遇到上述问题。以下内容也适用于Chrome;

.redDiv{
    position: relative;
    background-color:red;
    float: left;
}
.greenDiv{
    position: relative;
    background-color:green;
    float: right;
}

jQuery toggle（）打破浮动div

3 个答案: