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

Question

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

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

我无法真正调整 html，否则它会破坏我的应用程序布局（它是应用程序中的 jquery ui 手风琴 - 视图）

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

也许使用弹性盒？

谢谢你，非常喜欢。

我有以下代码：

 #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。我把它放在一个codepen中，它似乎有效：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/

Answer 2

使用 jQuerys position()

找到了一个不错的解决方案

var lefts = $("#navigation > h3.sperrmuell_content").position().left;
$("#navigation > div.dropdown.sperrmuell_content").css("left", lefts);

和

 #navigation > div
    {
        margin-left:100px;
    }

所以列表之间的空间总是和上面的菜单项一样:)