JqueryUI - Аккордеон. Отображение в одной строке

Question

Я использую JqueryUI Accordion, и он отлично работает. У меня есть структура вроде этого:

 <div id="accordionHolder">     
      <div id="accordionOne"> </div> 
      <div id="accordionTwo"> </div> 
      <div id="accordionThree"> </div> 
      <div id="accordionFour"> </div> 
      <div id="accordionFive"> </div> 
      <div id="accordionSix"> </div> 
     </div> 

Это отображается verticaly. Аккордеоны невелики по размеру. Как я могу отобразить, возможно, два или три гармошки в очереди?

Вещь - это действительно большой проект, и я вставляю функциональность. Я не смею прикасаться к CSS (ни в коем случае не эксперт). У меня есть моя страница, контейнер. Я могу определить свои собственные правила там.

Я попытался установить главный div на float-left, а также отобразить: inline ... но без особого успеха.

Как это сделать?

Когда я использую: float-left на аккордеонах, они больше не отображаются. Как будто они исчезают. Как только я удаляю float-left, они снова появляются.

Изображение показывает, что я пытаюсь достичь:

Я попытался рендеринга аккордеон на отдельных дивы, но когда делает его: Поплавок налево, одно и то же происходит. Он «входит» в предыдущий. Я попытался переместить их с помощью прокладки, но с результатами. Probelm с таким подходом - это когда один аккордеон расширяется, другие перемещаются вниз, даже если они уложены горизонтально.

Я runinng из идей :(

Answer 1

Аккордеон DIVS accordionOne -> accordionSix должны иметь CSS display:inline-block; Это заставит их выстраиваться по горизонтали

.