为什么我的手风琴元素没有扩展网页答案

【问题标题】：Why are My Accordion Elements Not Expanding the Webpage为什么我的手风琴元素没有扩展网页
【发布时间】：2013-12-16 03:25:03
【问题描述】：

我为我的学校主页建立了一个简单的网页。我正在使用手风琴来包含链接，但手风琴单元没有扩展网页。在这个JSfiddle 中，'Student Links' 手风琴扩展了<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>

【问题讨论】：

它们必须在不同的行上。

标签： jquery html css accordion

【解决方案1】：

试试

    <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;
}

您需要从#accordionTeachers 和#accordionLibrary 中删除float: left

演示：Fiddle

【讨论】：

这很好用，但是当手风琴打开时我仍然无法扩展主要的浅蓝色元素。当我第一次创建这个项目并引入未编辑的手风琴单元时，浅蓝色背景的高度将手风琴延伸到打开到未打开的手风琴盒的高度差。效果可以看这里：jsfiddle.net/L46Nh

【解决方案2】：

如果它不是混杂着 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;，但是当一个打开时，另一个会被推到底部。

【讨论】：