Как выполнить элементы аккордеона на Inline?

Я строю простую домашнюю домашнюю страницу для моей школы. Я хотел бы сделать это простым и чистым, поэтому я использую jQuery аккордеонные коробки, чтобы содержать ссылки. У меня есть элементы аккордеона, работающие нормально, но они не размещены должным образом. Я хочу, чтобы поля «Teacher Links» и «Library Info» были помещены в одну строку, но я не могу заставить его работать. Я не могу запустить их с «абсолютным» позиционированием, поскольку это не позволяет им распространять веб-страницу при их открытии.Как выполнить элементы аккордеона на Inline?

Кто-нибудь знает, как это исправить?

<body style="background-color: #D9F3FD"> 
<div id="bodyWrapper"> 
<p class="style1"><span class="style4" id="PHHS">PHHS</span> Home Screen</p> 
    <div class="accordionWrapper"> 
     <div id="accordionStudents"> 
      <h1>Student Links</h1> 
       <div> 
        <table border-color="white" id="table1"> 
         <tr id="table1Row1"> 
          <td class="table1Row1Data1">Bell Schedule</td> 
          <td class="tableRow1Data1">TeacherEase</td> 
          <td class="tableRow1Data1">Powerschool</td> 
          <td class="tableRow1Data1">Library Information</td> 
         <tr> 
         <tr> 
        <tr> 
         <td>Link</td> 
         <td>Link</td> 
         <td>Link</td> 
         <td>Link</td> 
        </tr> 
       </table> 
      </div> 
    </div> 
</div> 
<br> 
<br> 
<br> 
<div class="accordionWrapper"> 
    <div id="accordionTeachers"> 
     <h1>Teacher Links</h1> 
      <div> 
       <p>Test Teacher Text</p> 
      </div> 
    </div> 
    </div> 
<div class="accordionWrapper"> 
    <div id="accordionLibrary"> 
     <h1>PHHS Library Information</h1> 
      <div> 
       <p>Text Library Text</p> 
      </div> 
    </div> 
     </div> 
<br> 
<br> 
<br> 
    </div>

JSfiddle

источник

2013-12-15 user3103701

Так для решения первой проблемы коробок, находящихся "на одной и той же линии", вы можете просто плавать элементы так:

#accordionTeachers{ 
    width: 50%; 
    float: left; 
} 

#accordionLibrary{ 
    width: 50%; 
    float: left; 
}

Вы также не нужно .accordionWrapper вокруг них в вашем html. Теперь для второй точки

предотвращает их от расширения веб-страницы

я не уверен, если я правильно понимаю. Однако, если вы хотите открытый аккордеон продлить цветной DIV (# D9F3FD), вам придется регулировать высоту, возможно height: auto;

В общем, вы не должны использовать <br> or <br /> или пустые строки таблицы только для создания пустого пространства между ваши элементы. Используйте margin-top and margin-bottom для их вертикального перемещения.

источник

2013-12-15 10:21:01 BenMann

Это решило обе мои проблемы, в том числе и о расширении веб-страницы. Чтобы пояснить, моя проблема заключалась в том, что аккордеон должен продлить длину фона, чтобы раскрывающееся меню не переполняло контейнер, заставляя окно выглядеть так, как будто оно имело большое значение z-индекса (поэтому перекрытие других элементов). Я удалил теги '
' и использовал маржинальные инструменты, как вы предлагали, и теперь я получаю более функциональные возможности. У меня нет достаточной репутации для голосования, но если бы я это сделал, я бы это сделал. Еще раз спасибо! – user3103701

Добро пожаловать, рад, что это помогло:] – BenMann

Как выполнить элементы аккордеона на Inline?

ответ

Смежные вопросы