javascript - 如何让盒子自动向下移动？

Question

网址:http://test.getfamo.us/buy-twitter-followers.html

问题:这篇文章是关于下拉框的，它们目前已修复。我希望它们直接位于彼此下方，然后当您单击一个展开时，另一个被向下推。我该怎么做呢？

设置:每个框都是它自己的 div(box1 到 box6)，它在两个 div 中(顶部和底部(对应行)，然后在 about div 中。

CSS:这是我使用的 CSS:http://test.getfamo.us/css/screen.css

我相当肯定应该有一种方法可以用更少的代码来完成它。但无论如何，我更担心的是，当盒子展开时，下面的盒子会向下移动。有问题的代码在“/* ABOUT */”下，所以如果你搜索它应该会出现。

非常感谢您提供的任何帮助! (如果相关，在 jquery 中展开编码)

Answer 1

您是否正在考虑 Accordion 之类的东西？ FIDDLE

HTML

<div id="accordion">
  <h3>1,000 Followers - $4.99</h3>
  <div>
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Try us out now!</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24/7 Live Support</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Impress your followers</div>  
    <div><img src='http://www.clker.com/cliparts/b/a/L/8/a/Z/orange-cross-md.png' />Bulk Discount</div> 
  </div>
  <h3>5,000 Followers, $12.99</h3>
  <div>
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Live Support</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Get recognized now!</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Money back guartantee</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Great value</div>  
  </div>
  <h3>25,000 Followers, $29.99</h3>
  <div>
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Great for expanding business!</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Live Support</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Amazing Price</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Bulk Discount</div>  
  </div>   
  <h3>50,000 Followers, $49.99</h3>
  <div>
  <div>
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Lifetime support</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Bulk discount</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Be famous on twitter</div>  
  </div>   
</div>