让展开 - 收起盒移动/推主要内容向下和向上

我刚做了一个关于对齐两个展开 - 收起盒的问题，得到的回答和它的工作，但不是我遇到了另一个问题。让展开 - 收起盒移动/推主要内容向下和向上

当我扩大，我的盒子上（主要内容）下面的文本没有被按下，但更多的“轻推到右侧”。

的问题是清楚的在下面这段代码：

<!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

让展开 - 收起盒移动/推主要内容向下和向上

回答

相关问题