Les éléments de menu flottent vers la gauche et vers le bas

Question

Je crée un menu en utilisant une liste non ordonnée qui mélange des éléments de liste de différentes tailles, certains étant la moitié de la hauteur et la largeur des autres. Ils flottent tous à gauche. Ce que je veux est la suivante:

Si j'ajoute clairement: à gauche au troisième petit point que je reçois ceci:

Ce que je veux est pour la deuxième et la quatrième (ou troisième et quatrième) petits objets à flotter en dessous les deux autres, comme ceci:

Est-il possible de le faire avec css? Le menu est créé de façon dynamique, donc forcer une position particulière ne fonctionnera pas, il doit être en mesure de couler dans la bonne position.

Answer 1

ayant plusieurs <ul/> Would travail pour vous? Dans ce cas, la Codepen suivante travaillerait: https://codepen.io/anon/pen/qPaVar

Même code comme un extrait de code embarqué:

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>

Hope this helps!

Answer 2

Essayez le grid-auto-flow: dense https://developer.mozilla.org/ru/docs/Web/CSS/grid-auto-flow

Answer 3

essayer cette

.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>