Почему элементы My Accordion не расширяют веб-страницу

Question

Почему элементы My Accordion не расширяют веб-страницу

0

Я создал простую веб-страницу для моей домашней страницы. Я использую аккордеоны, чтобы содержать ссылки, но единицы аккордеона не распространяют веб-страницу. В этом 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>

user3103701 16 дек. 2013, в 04:53

Источник

0

Они должны быть на отдельных линиях.
Noah R 16 дек. 2013, в 03:28

Теги:

jquery

html

css

accordion

2 ответа

Ещё вопросы

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

Deryck · Answer 1 · 2013-12-16T02-30-00.000Z

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

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

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

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

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

Arun P Johny · Answer 2 · 2013-12-16T01-13-00.000Z

Пытаться

    <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

Демо: скрипка

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