讓展開 - 收起盒移動/推主要內容向下和向上

我剛做了一個關於對齊兩個展開 - 收起盒的問題，得到的回答和它的工作，但不是我遇到了另一個問題。讓展開 - 收起盒移動/推主要內容向下和向上

當我擴大，我的盒子上（主要內容）下面的文本沒有被按下，但更多的「輕推到右側」。

的問題是清楚的在下面這段代碼：

<!DOCTYPE html> 
<html> 
<head> 

<!-- Panel Slider for Contact --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 

<!-- Expand Collapse --> 
    <script type="text/javascript">$(function(){ 
$("#mostrar1").click(function(event) {event.preventDefault(); 
       $("#caja1").slideToggle(); 
       }); 

$("#caja1 a").click(function(event) {event.preventDefault(); 
       $("#caja1").slideUp(); 
       }); 
$("#mostrar2").click(function(event) {event.preventDefault(); 
       $("#caja2").slideToggle(); 
       }); 

$("#caja2 a").click(function(event) {event.preventDefault(); 
       $("#caja2").slideUp(); 
       }); 
}); </script> 

<style type="text/css"> 
.wrapper { 
    width: 30%; 
    float: left; 
} 
      #caja1 { 
      display: none; 
      padding:5px; 
      border:2px solid #FFFFFF; 
      background-color:#99a8ff; 
      } 

      #mostrar1{ 
      display:block; 
      padding:5px; 
      border:2px solid #FFFFFF; 
      background-color:#0C415F; 
      color: #FFFFFF; 
      } 

      #caja2 { 
      display: none; 
      padding:5px; 
      border:2px solid #FFFFFF; 
      background-color:#99a8ff; 
      } 

      #mostrar2{ 
      display:block; 
      padding:5px; 
      border:2px solid #FFFFFF; 
      background-color:#0C415F; 
      color: #FFFFFF; 
      } 

</style> 
</head> 

<body> 

<div class="wrapper"> 
<a href="#" id="mostrar1">Private</a><div style="display: none;" id="caja1"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div> 
</div> 
<div class="wrapper"> 
<a href="#" id="mostrar2">Erhverv</a><div style="display: none;" id="caja2"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div> 
</div><br> 
<p>THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXSES: <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p> 
</body> 
</html>

有誰知道如何「解釋」我的擴大箱子推羽絨及其下方的文本？

感謝 Mestika

來源

2010-03-19 Mestika

添加clear: left的主要內容，就像這樣：

CSS

#content { 
    clear: left; 
}

HTML

<div id="content"> 
    <p> 
    THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXES: 
    ... 
    </p> 
</div>

來源

2010-03-19 16:14:52

非常感謝。它的功能就像一個魅力:-) – Mestika 2010-03-19 16:24:25

看起來不錯，它的工作原理，但是，我有大約30個項目我想堆疊在彼此的頂部（建設一個智能手機的網站）我打算列表一個項目，然後你點擊它，它會與信息擴大它anbd推列表的其餘部分了，那麼你就可以再次按下關閉。每次我想堆棧信息的另一塊我有Java腳本的另一個兩段另有2點的ID添加到我的CSS。因爲它的立場，現在我能做到這一點，但我的CSS和Java Script可能會變得很長。無論如何要改變代碼只有一塊java腳本a – 2011-02-22 17:47:50

讓展開 - 收起盒移動/推主要內容向下和向上

回答

相關問題