Question

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

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

您需要从float: left和#accordionTeachers

中删除#accordionLibrary

演示：Fiddle

Answer 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;但是当一个打开时，另一个将被推下来。

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

2 个答案: