Menüoptionen schweben nach links und nach unten

Question

Ich erstelle ein Menü mit einer ungeordneten Liste, die Listenelemente verschiedener Größen mischt, von denen einige die Hälfte der Höhe und Breite anderer haben. Sie alle schweben nach links. Was ich bekomme, ist dies:

Wenn ich klar hinzufügen: links auf den dritten kleinen Artikel, den ich diese:

Was ich will, ist für die zweite und die vierte (oder dritte und vierte) kleine Gegenstände unter den beiden anderen, wie dies zu schweben:

gibt es eine Möglichkeit, dies mit CSS zu tun? Das Menü wird dynamisch erstellt, sodass das Erzwingen einer bestimmten Position nicht funktioniert, sondern in die richtige Position fließen muss.

Answer 1

würden Sie mehr <ul/> Arbeit mit? Wenn ja, würden die folgenden Codepen arbeiten: https://codepen.io/anon/pen/qPaVar

gleichen Code wie ein eingebetteten Code-Schnipsel:

ul { 
 
    list-style : none; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center 
 
} 
 

 
li { 
 
    margin: 0 
 
} 
 

 
li.left { 
 
    float: left 
 
} 
 

 
div.small { 
 
    background-color: blue; 
 
    width: 20px; 
 
    height: 20px 
 
} 
 

 
div.large { 
 
    background-color: yellow; 
 
    width: 40px; 
 
    height: 40px; 
 
}

<ul> 
 
    <li class="left"> 
 
    <div class="large">A</div> 
 
    </li> 
 
    <li class="left"> 
 
    <ul> 
 
     <li class="left"> 
 
     <div class="small">1</div> 
 
     </li> 
 
     <li class="left"> 
 
     <div class="small">2</div> 
 
     </li> 
 
    </ul> 
 
    <ul> 
 
     <li class="left"> 
 
     <div class="small">3</div> 
 
     </li> 
 
     <li class="left"> 
 
     <div class="small">4</div> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="left"> 
 
    <div class="large">B</div> 
 
    </li> 
 
</ul>

hoffte, das hilft!

Answer 2

Versuchen Sie, die grid-auto-flow: dense https://developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow

Answer 3

versuchen, diese

.main li { 
 
    display: inline-block; 
 
    vertical-align: middle !important; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid; 
 
} 
 

 
.inner-div li { 
 
    width: 99px; 
 
    height: 89px; 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
ul.inner-div { 
 
    list-style: none; 
 
    padding: 0; 
 
}

<div class="container"> 
 
    <ul class="main"> 
 
    <li>div 1</li> 
 
    <li>div 2 
 
     <ul class="inner-div"> 
 
     <li>div 21</li> 
 
     <li>div 21</li> 
 
     <li>div 21</li> 
 
     <li>div 21</li> 
 
     </ul> 
 
    </li> 
 
    <li>div 3</li> 
 

 

 
    </ul> 
 
</div>