jQuery的切换（）休息浮动的div

我一直在寻找了几个小时试图解决这一问题，但它似乎并不像其他人一样也有这个问题。jQuery的切换（）休息浮动的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();

还是在这里的jsfiddle：http://jsfiddle.net/0hxc8rr4/

注：我想换出“的style.display =东西”呼吁jQuery和这似乎没有帮助。

来源

2015-02-11 BlueMaegi

它是为我工作的罚款。它们在切换后都出现在相同的地方。 – 2015-02-11 23:05:10

@MichaelDziedzic您使用的是什么浏览器？我目前使用的是Chrome 40.0 – BlueMaegi 2015-02-11 23:08:13

其实我回来了。它适用于Mac Safari和Firefox，但是我遇到了Chrome的问题。 – 2015-02-11 23:08:14

一旦你切换jQuery将重新定义display财产。您可以简单地将float:left添加到红色块类，它应该修复它。或者如上所述，在每次通话后重新定义它。但是如果你已经漂浮了一个元素，那么漂浮另一个元素是有意义的。

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

来源

2015-02-11 23:06:09 Aweary

这很简单。 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; 
}

来源

2015-02-11 23:05:00 Timmerz

只获取在Mac浏览器（不Safari或Firefox）上述问题。下面也可以在Chrome上使用它;

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

来源

2015-02-11 23:12:00

jQuery的切换（）休息浮动的div

回答

相关问题