html css Positionierung divs unter anderen Elementen ohne Anpassung html

Question

Ich habe vier Menüpunkte (h3) und vier Listen zu den Menüpunkten.
ich möchte die Listenelemente genau unter den einzelnen Menüpunkten ausrichten. Es ist möglich, dass ein anderes Menü & Listenelement sollte dynamisch angezeigt werden. so ist es möglich, dass drei oder vier Gegenstände auftauchen.

Wenn zu diesem Zeitpunkt das vierte Element angezeigt wird, stürzt das Layout ab. natürlich ... weil die List-Divs eine feste Position haben.

ich die html sonst nicht wirklich einstellen kann es mein app-Layout vermasselt (es ist das jQuery UI Akkordeon in app - Ansicht)

so meine Frage: ist es möglich, die Elemente dynamisch ein- und ausblenden von der Seite und sie werden immer den relativ richtigen Abstand zueinander haben?

vielleicht mit flexbox?

Vielen Dank und viel Liebe.

Ich habe den folgenden Code:

#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

Sie haben Art Ihre eigene Frage beantwortet, indem er sagte kann ich Flexbox verwenden. Sie können display:flex zu Ihrem Container #navigation hinzufügen. Ich habe dies in einen Codepen eingefügt und es scheint zu funktionieren: http://codepen.io/anon/pen/qrOaVJ. Schau es dir an und lass mich wissen, was du denkst.

zu dieser Antwort auf Ihre #navigation zu erweitern, wenn Sie die folgende hinzu:

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

Hier sind einige weitere Lektüre und ein ausgezeichneter Führer zu Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

eine schöne Lösung mit jQuerys gefunden Position()

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

und

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

so dass der Raum zwischen den Listen sind immer die gleiche wie von dem menuitems oben :)