Expand div Höhe basierend auf ul li Elemente?

Question

Frieden und Segen sei mit euch

:) Sagen, ich habe:

<div class="c1"> 
    <div class="c2"> 
     <ul> 
     <li><div class="c3"></div></li> 
     <li><div class="c3"></div></li> 
     <li><div class="c3"></div></li> 
     <li><div class="c3"></div></li> 
     <li><div class="c3"></div></li> 
     <li><div class="c3"></div></li> 
     <li><div class="c3"></div></li> 
     <li><div class="c3"></div></li> 
     <li><div class="c3"></div></li> 
     </ul> 
    </div> 
</div> 

Also im Grunde ich die div c1 & c2 zu erweitern, basierend auf li Inhalte möchten.

Ich habe dieses Jsfiddle erstellt: https://jsfiddle.net/unpfk1aw/ die in c1 erweitern, aber c2 bleibt noch. Ich würde es sehr schätzen, wenn Sie mir sagen, was die Ursache ist.

Answer 1

Weil Sie float: left; verwenden. Dies nimmt das Element aus dem Fluss des Dokuments, und bedeutet, dass das c2 div keine Ahnung über die Höhe jedes li hat.

Ersetzen Sie stattdessen float: left; durch display: inline-block; in Ihrem ul li Selektor.