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

回答

相關問題