jQuery的，切換DIV，CSS間距問題

我有這個標記：jQuery的，切換DIV，CSS間距問題

<div class="myToggledDiv"> 
    <div>content</div> 
</div> 

<div style="margin-top: 10px;"> 
    content 
</div>

通過jQuery，我在做.slideToggle顯示/隱藏頂格。

我希望有兩個div之間的10px空間，無論是摺疊還是展開。

然而，行爲，當頂級div滑落，10px的餘量保持不變，但只要頂部div完成滑動10px的餘量消失。這似乎是一個利潤率崩潰的問題。

我想出瞭解決的辦法是這樣的：

<div class="myToggledDiv"> 
    <div>content</div> 
</div> 

<div style="font-size: 1px">&nbsp;</div> 

<div style="margin-top: 10px;"> 
    content 
</div>

的& NBSP;是關鍵，因爲需要在div中有內容來「分離」兩者並保留10px的保證金。

我試過.clearfix：after方法，但是在這種情況下不起作用，所以也許這是一個以jQuery爲中心的問題。有沒有人遇到過這種情況，並找到比額外的div更優雅的解決方案？

來源

2010-02-17 DA.

信不信由你，你只需要在父容器的頂部添加一個1px填充。問題是，在slideToggle的末尾，第一個div設置爲display:none，這導致第二個div與父對齊。現在，它只是一個CSS錯誤。如果在父項目上沒有設置padding，則子項目邊距將在父項的之外，並將兩個項目都推下。通過應用1px保證金父元素，將強制margin呆在裏面的元素：

<body style="padding-top: 1px"> <div class="myToggledDiv"> <div>content</div> </div> <div style="margin-top: 10px;"> content </div> </body>

很顯然，你要根據需要刪除所有這些內嵌樣式，並使用一個單獨的樣式表和id的/班。

如果需要，以抵消微胖（取決於你的佈局），你可能只是能夠使用這樣的：

{ margin-top: -1px; padding-top: 1px }

來源

2010-02-17 20:13:29

+1一如既往的好信息，道格！ – Sampson

有些奇怪的解決辦法，但你可以設置第二個div下列規則：

{ position:relative; top:10px; }

在線演示：http://jsbin.com/enala/edit

我也建議你考慮Doug's Answer。如果在父容器上設置填充會產生不希望的結果，那麼可以選擇使用此解決方案。

來源

2010-02-17 19:50:47 Sampson

是啊，這工作也是如此。我喜歡CSS如何解決問題的多種方法！ –

jQuery的，切換DIV，CSS間距問題

回答

相關問題