Позиционирование div

Question

Я работаю с аккордеоном Jquery. Мой код выглядит так:

<h3><a href="#">Test </a></h3>
<div class="accordion" style="background-color:yellow;">
   <div class="test_1">
      my first dynamic content div
   </div>
   <div class="test_2">
      my second dynamic content div
   </div>
</div>

Итак, вы видите H3, который является «аккордеоном», если я нажму на него, то гармошка div открывается с двумя отдельными дивами. Это все работает, но позиционирование моих 2-х дивов внутри гармошки не удается. Я хотел бы получить их ПОД друг от друга, но оба div генерируются динамически, что означает, что я не знаю размер первого div (test_1), поэтому я не могу расположить на пикселях. Я уже пробовал с некоторыми тегами br и т. Д., Но ничего не работает. Есть ли способ сделать это в CSS, может быть, с помощью float или что-то, или это должно быть сделано внутри HTML? Любые другие идеи?

С уважением,

T * 1008

Answer 1

Я думаю, что если вы используете неупорядоченный список вместо div, все может встать на свои места.

<h3><a href="#">Test </a></h3>
<ul class="accordion" style="background-color:yellow;">
   <li class="test_1">
      <p>my first dynamic content div</p>
   </li>
   <li class="test_2">
      <p>my second dynamic content div</p>
   </li>
</ul>

Answer 2

Я думаю, что вы можете справиться с этим css

первый способ установить правило постоянной ширины на любой div в гармошка класс

.accordion div {
     width:150px;or 100% up to your design
}

Второй способ - установить еще один класс для вашего div (ов), т.е.

.

.w150px {
     width:150px;or 100% up to your design
}

Но на этот раз вы должны добавить свои классы CSS в тест

<div class="test1 w150px"> ...

С наилучшими пожеланиями
Myra

Answer 3

display: inline-block;

Answer 4

Я знаю, что это ужасно для многих чистых CSS людей, но если вы добавите тег
после вашего первого div test_1 (если это вариант, так как вы упомянули, что часть контента генерируется автоматически), это может решить проблему.

<div class="test_1"> 
      my first dynamic content div 
   </div><br />

Answer 5

Я думаю, все, что вам нужно, это установить эти свойства для обоих элементов div

#test_1, #test2
{
     width: 100%;
     height: auto;
     display: inline-block; /*oryou can use just inline*/
     margin : 0px;/*this is not necessary but it is better to put it to reset incorrect margin set by browser */
}

Answer 6

Используете ли вы JQuery UI accordian, или «Jquery Accordian», который является более или менее серией шоу и шкур (Который используется чаще, я бы подумал).

В любом случае, попробуйте добавить «display: block» в CSS класса inner_test2. Это должно работать.

В зависимости от того, как задан ваш jquery (если вы строите аккордеон, используя только обычную библиотеку jquery), вы должны иметь возможность добавить обратный вызов в show или hide и прикрепить блок после (That это если убрал дисплей: блок).

Answer 7

Мне трудно понять вашу проблему. Но вот три пункта, которые я бы проверил. 1 - Убедитесь, что все ваши теги правильно закрыты. Если у вас отсутствует тег, это может повлиять на отображение вашего макета. 2 - Если элементы не попадают друг под друга, убедитесь, что к элементам div не прикреплены плавающие стили 3 - Если вы вручную установите высоту элемента, а затем добавите контент, ваши элементы не обязательно освободят место для нового элемента.

Если не считать того, что на самом деле не отображается фактический html-файл, диагностировать его будет довольно сложно.

Answer 8

Я объясню немного лучше с еще большим кодом:

Итак, давайте рассмотрим пример, у меня есть 4 элемента, которые создаются динамически. У меня есть 2 div внутри div "accordian", как и раньше, а именно: test_1 и test_2. Для каждого элемента div может быть 3 элемента, которые создаются динамически. Так что в первом div test_1 будет 3 div (потому что есть 3 элемента), а в div test_2 будет 1 div (4-й элемент, который создается динамически). После того, как css Myra опубликовала элементы ВНУТРИ, div test_1 позиционируется под каждым другим. Но я хочу увидеть, что div test_2 находится в div test_1. Таким образом, 4-й элемент в основном должен быть ПОД 3 элементами независимо от высоты 3 элементов (div test_1). Надеюсь, я предоставил вам более подробную информацию.

<div style="background-color:yellow;">
    <div class="test1">
        <div class="inner_test1">
           this div gets dynamically generated, so in our example there will be 3 of these inside test1
        </div>
    </div>
    <div class="test2>
        <div class="inner_test2">
            The 4th element gets generated inside this div, if there are 5 elements the 4th and 5th element will be 2 divs of inner_test2
        </div>
        <div class="inner_test2">
            So this is the 5th element for example
        </div>
    </div>
</div>

Таким образом, div test2 должен располагаться под div test2.