Comment égaliser une liste non ordonnée à hauteur variable

Question

J'ai une liste non ordonnée à hauteur variable:

<ul style="list-style-type: none;"> 
    <li style=" float:left"><div style="width:200px;">[divcontent]</div></li> 
    <li style=" float:left"><div style="width:200px;">[divcontent]</div></li> 
    etc 
    </ul> 

Ces div contiennent du texte de longueur variable et en conséquence la hauteur varie. Il en résulte un affichage indiscipliné lorsqu'ils ont une bordure d'arrière-plan coloré. Pire encore, quand ils s'enroulent sur la ligne suivante, ils ne s'enroulent pas sur le côté gauche, mais tendent à rester derrière un plus long div au milieu.

Toutes les hauteurs d'une rangée doivent correspondre à la hauteur de l'élément le plus haut de cette rangée. Donc, si l'élément le plus élevé sur la ligne 1 est 100px, tous les éléments (li) sur cette ligne devraient devenir 100 élevés. Si sur la ligne suivante, l'élément le plus élevé est 150px, tous les éléments devraient avoir cette hauteur.

Existe-t-il un moyen d'y parvenir?

Answer 1

Cela peut être fait en utilisant Flexbox, comme vous pouvez le voir, tous les éléments d'une rangée auront la même hauteur que l'élément le plus haut de cette rangée.

* { 
 
    box-sizing: border-box; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    padding: 0; 
 
} 
 
li { 
 
    background: lightblue; 
 
    margin: 10px; 
 
}

<ul style="list-style-type: none;"> 
 
    <li><div style="width:200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quod illum deleniti, cum modi ipsa vitae. Eos, tempore vero porro sapiente facilis? Asperiores ullam, adipisci minima quisquam, hic pariatur nam.</div></li> 
 
    <li><div style="width:150px;">[divcontent]</div></li> 
 
    <li><div style="width:100px;">[divcontent]</div></li> 
 
    <li><div style="width:300px;">[divcontent]</div></li> 
 
    <li><div style="width:200px;">[divcontent]</div></li> 
 
    <li><div style="width:100px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, porro.</div></li> 
 
</ul>