divs 在 jquery slideDown() 之后不停留在一行中

Question

当页面上有一个div时，我可以让div直接在它下面滑动，但是一旦我在同一行上有两个+，slideDown函数就会从右侧顶部开始向下滑动。我试图将它们放在单独的div 中，但仍然与下面的小提琴中的内容存在相同的问题。

如果有人能把我推向正确的方向，那将不胜感激。

.html：

<div id="panel1" class="panel">
    <!-- start of toggle div -->
    <div id="nena">
        <img src="../images/tshirt pictures/nena boys.jpg" />
            <p class="tshirtName"> sample text</p>
                <p id="show"><span style="font-family:NimbusSanDCon; font-weight:bold; font-size: 2em;">+</span></p>
    </div><!-- end of nena-->
    <div id="below">
    <p class="itemDescription">basiq tee</p>
    <p class="price">49.95</p>
    <br />
    <p class="price"> sizes</p>
    <select name="size">
  <option value="s">S</option>
  <option value="m">M</option>
  <option value="l">L</option>
  <option value="xl">XL</option>
</select><br /><br />

<p class="price"> colours</p>
    <select name="size">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="white">White</option>
  <option value="black">Black</option>
</select>
        <p id="hide"><span style="font-family:NimbusSanDCon; font-weight:bold; font-size: 2em;">-</span></p>
    </div><!-- end of below div when shown-->
    <!-- end of toggle div-->

.css：

#nena {
    height: 160px;
    width: 100px;
    border:thin solid #DEDEDE ;
    margin-left: 10px;
    margin-right: 10px;
float: left;}
.tshirtName {
    font-family: NimbusSanDCon;
    font-weight: bold;
    font-size: 1.2em;
    padding-right: 5px;
    text-align: center;}

#below {
    background-color: #F5F5F5;
    width: 100px;
    height: auto;
    display: none;
    padding: 5px;
float: left;}
#nena img {
    width: 90px;
    margin-top: 5px;
    margin-left: 5px;}
#show {
    float: right;
    margin-right: 5px;
    }
#hide {
    float: right;
    margin-right: 5px;}
.itemDescription {
    font-family:NimbusSanDCon;
    font-weight: bold;
    font-size: 1.3em;
    color: #1c665b;
    margin-left: 5px;}
.price {
    font-family: NimbusSanDCon;
    font-weight: bold;
    margin-left: 5px;
    letter-spacing: .2em;
}
a {
    color: black;}

这是工作小提琴：http://jsfiddle.net/jbX6p/1/

提前致谢

Answer 1

这是一个更新的 jsfiddle 给你 http://jsfiddle.net/jbX6p/2/。应使用 position 属性以正确的方式定位元素。在这种情况下使用

.below{
   position:absolute;
    /* then position it the way you want using margin property */
}

此外，您还有几个具有相同 id 的div，#nena、#below 等。 你不能这样做，这是一个很大的错误。将它们全部更改为类名。