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

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

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

你也有几个div具有相同的id #nena，＃below等。你不能这样做，这是一个很大的错误。将所有这些更改为类名。

在jquery slideDown（）之后，div不会停留在一行中

1 个答案: