Почему Мои Аккордеонные Элементы не расширяют веб-страницу

Я создал простую веб-страницу для моей домашней страницы в школе. Я использую аккордеоны, чтобы содержать ссылки, но единицы аккордеона не распространяют веб-страницу. В этом JSfiddle аккордеон «Студенческие ссылки» расширяет длину <body>, но другие аккордеонные контейнеры не будут. Недавно я получил помощь в отношении размещения аккордеонов, что позволило мне иметь две на одной линии. После этого два в одной строке не распространяют веб-страницу.Почему Мои Аккордеонные Элементы не расширяют веб-страницу

<title>PHHS Main Page</title> 

<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> 
          <td> </td> 
          <td> </td> 
          <td> </td> 
          <td> </td> 
         </tr> 
         <tr> 
          <td>Link</td> 
          <td>Link</td> 
          <td>Link</td> 
          <td>Link</td> 
         </tr> 
        </table> 
       </div> 
     </div> 
    </div> 
    <div class="accordionWrapper accordion-inline"> 
     <div id="accordionTeachers" class="accordion-custom"> 
      <h1>Teacher Links</h1> 
      <div> 
       <p>Test Teacher Text</p> 
      </div> 
     </div> 
     <div id="accordionLibrary" class="accordion-custom"> 
      <h1>PHHS Library Information</h1> 
      <div> 
       <p>Text Library Text</p> 
      </div> 
     </div> 
    </div> 
</div> 

</body>

источник

2013-12-16 user3103701

Они должны быть на отдельных линиях. –

Попробуйте

<div class="accordionWrapper accordion-inline"> 
     <div id="accordionTeachers" class="accordion-custom"> 
      <h1>Teacher Links</h1> 
      <div> 
       <p>Test Teacher Text</p> 
      </div> 
     </div> 
     <div id="accordionLibrary" class="accordion-custom"> 
      <h1>PHHS Library Information</h1> 
      <div> 
       <p>Text Library Text</p> 
      </div> 
     </div> 
    </div>

затем

.accordion-inline .accordion-custom { 
    display: inline-block; 
    vertical-align: top; 
}

вам нужно удалить float: left из #accordionTeachers и #accordionLibrary

Демо: Fiddle

источник

2013-12-16 03:42:38

Это прекрасно работает, но я все еще не могу расширить основной голубой элемент, когда аккордеон открывается. Когда я впервые создал этот проект и внедрил неотредактированные единицы аккордеона, высота светло-голубого фона расширила бы аккордеон до разницы высот открытого в нераспечатанном аккордеоне. Эффект можно увидеть здесь: http://jsfiddle.net/L46Nh/ – user3103701

Если бы это было не так перемешаны с как 8234 различных аккордеона вещей (и я смертельно боюсь <table> с) я бы полностью маслобойки прочь и исправить все это для вас.

#accordionTeachers { 
    width: 45%; 
    float: left; 
    margin-left: 2%; 
} 
#accordionLibrary { 
    width: 45%; 
    float: left; 
    margin-left: 6%; 
}

Проблема, с которой вы сталкиваетесь, находится здесь. Использование float: left; - это отличный трюк большую часть времени, но ваши аккордеоны должны быть на земле, чтобы подтолкнуть другие элементы, как они должны.

Удалите float: left; из этих двух, и вы хорошо на пути к победе. К сожалению, кажется, что вы уже отформатировали ВОКРУГ идеи о поплавках, так что может потребоваться небольшая работа по отмене.

Если вы действительно хотите, чтобы они были в одной строке, вы можете использовать display: inline-block;, но когда кто-то откроется, другой будет сдвинут вниз.

источник

2013-12-16 03:42:47 Deryck

Почему Мои Аккордеонные Элементы не расширяют веб-страницу

ответ

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