Javascript jQuery toggle（）中断浮动div

我已经搜索了几个小时试图解决这个问题，但似乎没有其他人遇到过这个问题

我有两个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();

//Html
//Css内容如下：
.tableWrapper{宽度：100%}
.redDiv、.greenDiv{宽度：49%；高度：150px；}
雷迪夫先生{
显示：内联块；
背景色：红色；
}
格林迪夫先生{
浮动：对；
背景颜色：绿色；
}
//我的两个微不足道的jquery调用。。。
$（“.redDiv”）.toggle（）；
$（“.greenDiv”）.toggle（）；

或者在JSFiddle上：

---

注意：我尝试为jQuery替换掉“style.display=stuff”调用，但似乎没有帮助。

这很简单。jQuery使用

display:block

显示元素，然后它需要一行而不是一个单元格

您可以自己手动将其切换到

内联块

在您的情况下，只需在第一个div上使用

float:left

---

这很简单。jQuery使用

display:block

显示元素，然后它需要一行而不是一个单元格

您可以自己手动将其切换到

内联块

在您的情况下，只需在第一个div上使用

float:left

---

一旦切换，jQuery将重新定义

显示

属性。您可以简单地将

float:left

添加到redblock类中，它应该可以修复它。或者如前所述，在每次调用后重新定义它。但是如果你已经浮动了一个元素，那么浮动另一个元素是有意义的

---

一旦切换，jQuery将重新定义

显示

属性。您可以简单地将

float:left

添加到redblock类中，它应该可以修复它。或者如前所述，在每次调用后重新定义它。但是如果你已经浮动了一个元素，那么浮动另一个元素是有意义的

---

仅在Mac Chrome（而不是Safari或Firefox）上出现上述问题。下面让它在Chrome上也能工作

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

---

仅在Mac Chrome（而不是Safari或Firefox）上出现上述问题。下面让它在Chrome上也能工作

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

---

这对我来说很好。切换后，它们都出现在同一个位置。@MichaelDziedzic您使用的是什么浏览器？我现在使用的是Chrome40.0，事实上，我收回了这一点。它在Mac Safari和Firefox上运行良好，但我发现Chrome有问题。它对我来说运行良好。切换后，它们都出现在同一个位置。@MichaelDziedzic您使用的是什么浏览器？我现在使用的是Chrome40.0，事实上，我收回了这一点。它在Mac Safari和Firefox上运行良好，但我发现Chrome有问题。