html css htmlを調整せずに他の要素の下にdivを配置

Question

私は4つのメニュー項目（h3）と4つのメニュー項目を持っています。
私はリスト要素を単一のメニュー項目の真下に揃えたいと考えています。可能な別のメニュー&リスト項目は動的に表示されるべきです。 3〜4つのアイテムが表示される可能性があります。

この時点で、4番目の項目が表示されると、レイアウトがクラッシュします。もちろん...リストdivは固定された位置を持っているからです。

私は本当にそれ以外の場合は、私のアプリレイアウトを台無しに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

あなたが一種の私はフレキシボックスを使用することができますと言って、あなた自身の質問に答えました：

iは、次のコードを持っています。コンテナ#navigationにdisplay:flexを追加できます。私はこれを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 
} 

は、さらにいくつかの読書やフレキシボックスに優れたガイドです：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

はjQuerys 位置との素敵な解決策を見つけました（）

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

と

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

ので、リスト間のスペースは笑:)