jquery - html css将div定位在其他元素下方而不调整html

Question

我有四个菜单项 (h3) 和四个与菜单项相关的列表。
我想将列表元素对齐到单个菜单项的正下方。可能应该动态显示另一个菜单和列表项。所以可能会出现三到四个元素。

此时，当显示第四项时，布局崩溃。当然...因为 list-div 有固定的位置。

我不能真正调整 html，否则它会搞砸我的应用程序布局(它是应用程序中的 jquery ui Accordion View )

所以我的问题是:是否可以动态显示和隐藏页面中的元素，并且它们之间总是有相对正确的空间？

也许使用 flexbox？

谢谢你，非常爱你。

我有以下代码:

 #navigation {
      width:100%;
    }

    /*Menü-Items (Behälter, Sperrmüll, Veranlagungen, Service)*/     
    #navigation h3 {
          font-size: 1.3rem;
          float:left;
          height: 22%;
          width: 14%;
          margin-left: 10%;         
          background-color: #edf3d0;
          border-top-right-radius: 15px;
          border-bottom-left-radius: 15px;
          border-left: solid 8px transparent;
          border-right: solid 8px transparent;
          margin-top: 3rem;
        }


        #navigation > h3:nth-child(1) {
            margin-top: 3rem;
        }

        #navigation h3 {
            border-left: solid 8px #a4c412;
            border-right: solid 8px #a4c412;
        }

        /*** Liste unter Menüpunkt Behälter****/
        #navigation > div.dropdown.behaelter_content {
            left: 10%;
        }
        /*** Liste unter Menüpunkt Sperrmüll****/
        #navigation > div.dropdown.sperrmuell_content {
           left: 35%
        }
        /*** Liste unter Menüpunkt Mein Bereich****/
        #navigation > div.dropdown.mein_bereich_content {
           left:60%;
        }

        /****ausgeblendet: Veranlagungen***/
        #navigation > div.dropdown.veranlagungen_content {
          left:85%
        }

    .dropdown {
        width: 15% !important;
        position:fixed;
        top: 60%;
        float: left;
    }

    <div id="navigation" class="center">

        <h3 id="behaelter" class="behaelter_content ">
            <img class="icon" src="bibliotheken/images/dustbin.svg" />

            <span class="text">Beh&auml;lter</span>

        </h3>

        <div class="dropdown behaelter_content ">

            <ul class="rectangle-list">
                <!--li><a id="behaelterliste">Liste der Beh&auml;lter</a></li>-->
                <li class="behaelter_content "><a id="behaelter_verwalten">Beh&auml;lter verwalten</a></li>
                <li class="behaelter_content "><a id="schaden">Schadensmeldungen</a></li>
                <!--li><a id="personendaten">Personen- <br />und Beh&auml;lterdaten</a></!--li>-->
                <li class="behaelter_content "><a id="leerungsdaten">Leerungsdaten</a></li>
            </ul>
        </div>

        <h3 id="sperrmuell" class="sperrmuell_content">
            <img id="sperrmuell" class="icon" src="bibliotheken/images/recycling-truck.svg" />

            <span class="text">
                Sperrm&uuml;ll
            </span>
        </h3>
        <div class="dropdown sperrmuell_content">
            <ul class="rectangle-list">
                <li><a id="sp_anmelden1">Sperrm&uuml;ll anmelden</a></li>
                <li><a id="sp_termine">&Uuml;bersicht der Termine</a></li>
                <li><a id="sp_termine_aendern">Termin &auml;ndern</a></li>

            </ul>
        </div>



        <h3 id="veranlagungen" class="veranlagungen_content">
            <img class="icon" src="bibliotheken/images/money.svg" />

            <span class="text">
                Veranlagungen
            </span>
        </h3>
        <div class="dropdown veranlagungen_content">
            <ul class="rectangle-list">
                <li><a id="uebersicht_veranlagungen">&Uuml;bersicht der<br /> Veranlagungen</a></li>
                <li><a id="uebersicht_zahlungen">&Uuml;bersicht der<br>Zahlungen</a></li>
            </ul>
        </div>


        <h3 id="mein_bereich" class="mein_bereich_content">
            <img class="icon" src="bibliotheken/images/information.svg" />

            <span class="text">
                Mein Bereich
            </span>
        </h3>
        <div class="dropdown mein_bereich_content">
            <ul class="rectangle-list">
                <li><a id="stammdaten">Meine pers&ouml;nlichen Daten</a></li>
                <!--li><a id="eigenkomp">Eigenkompostierung</a></!--li>-->
                <li><a id="objekte">Meine Objekte</a></li>
                <li><a id="bankdaten">Meine Bankdaten</a></li>
                <li><a id="kontakt">Kontakt und Reklamationen</a></li>

            </ul>
        </div>


    </div>
     

Answer 1

您通过说我可以使用 Flexbox 来回答您自己的问题。您可以将 display:flex 添加到您的容器 #navigation 中。我把它放在代码笔中，它似乎有效:http://codepen.io/anon/pen/qrOaVJ .看一看，让我知道您的想法。

要在 #navigation 上扩展此答案，请添加以下内容:

#navigation {
  display:flex; //define flex container
  flex-wrap:nowrap; //this will prevent the items from wrapping to the next line
}

这里有一些进一步的阅读和 Flexbox 的优秀指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/