div не остается в одной строке после jquery slideDown ()

Question

div не остается в одной строке после jquery slideDown ()

0

Я могу заставить div смещаться прямо под ним, когда один div находится на странице, но как только у меня two+ в той же строке, функция 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/

заранее спасибо

elroyz 20 окт. 2013, в 02:35

Источник

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Maxim Ershov · Accepted Answer · 2013-10-19T22-40-00.000Z

Вот обновленный jsfiddle для вас http://jsfiddle.net/jbX6p/2/. Вы должны использовать свойство position, чтобы правильно позиционировать свои элементы. в этом случае используйте

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

Кроме того, у вас есть несколько div с тем же идентификатором #nena, #below и т.д. Вы не можете этого сделать, это большая ошибка. Измените их все как имя класса.

Хорошо плохо смотрю в это спасибо. Я просто использовал это для скрипки мои извинения я исправлю имена классов и исправлю это сейчас