blocs flottants tombent sous

Question

Comment empêcher les blocs flottants de s'effondrer? Ils tombent ... Je ne veux pas définir une hauteur spécifique, car ce n'est pas pratique.

J'ai besoin d'une solution flottante. Pas flexible. Avec flex il serait super facile =)

.block { 
 
    position: relative; 
 
    background: lightblue; 
 
    border: 3px solid #5fb3ce; 
 
    padding: 15px; 
 
    width: 40%; 
 
    float: left; 
 
    margin: 2px; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    list-style: none; 
 
}

<ul class="parent"> 
 
    <li class="block"> 
 
    <p>fadsfa sd fa sdfasd fasdsd fasd fa</p> 
 
    </li> 
 
    <li class="block"> 
 
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
    <li class="block"> 
 
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
    <li class="block"> 
 
    <p>ads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
    <li class="block"> 
 
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
    <li class="block"> 
 
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
</ul>

Answer 1

EDIT

Si vous vous souciez de la largeur au lieu de la hauteur, vous pouvez créer différents conteneurs "colonne" de cette largeur fixe, faites-les flotter à gauche, et utilisez javascript pour répartir vos "blocs" entre eux, ainsi vous obtiendrez un résultat comme ceci:

 
.column { 
 
    width: 40%; 
 
    float:left; 
 
} 
 
.block { 
 
    background: lightblue; 
 
    border: 3px solid #5fb3ce; 
 
    padding: 15px; 
 
    margin: 2px; 
 
} 
 

 
.parent { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="parent"> 
 
    <section class="column"> 
 
    <article class="block"> 
 
     <p>fadsfa sd assasa sasdf aasdf fa sdfasd fasdsd fasd fa</p> 
 
    </article > 
 
    <article class="block"> 
 
     <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </article > 
 

 
    <article class="block"> 
 
     <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </article > 
 
    </section> 
 
    <section class="column"> 
 
    <article class="block"> 
 
     <p>ads fa sdfasd fasfasd fasdfads faasdfasdfasdf asdfasdf asdf asdfasdf sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </article > 
 

 
    <article class="block"> 
 
     <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </article > 
 

 
    <article class="block"> 
 
     <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </article > 
 

 
    </section> 
 
</div>

Answer 2

Je suppose que votre problème ici est que vous voulez effacer chaque enfant étrange et ne veulent pas qu'il soit même hauteur. Donc, la solution la plus simple lors de l'utilisation float sera juste effacer à gauche chaque enfant impair avec (2n + 1) sélecteur.

.block { 
 
    position: relative; 
 
    background: lightblue; 
 
    border: 3px solid #5fb3ce; 
 
    padding: 15px; 
 
    width: 40%; 
 
    float: left; 
 
    margin: 2px; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul>li:nth-child(2n+1){ 
 
    clear: left; 
 
} 
 

 
li { 
 
    list-style: none; 
 
}

<ul class="parent"> 
 
    <li class="block"> 
 
    <p>fadsfa sd fa sdfasd fasdsd fasd fa</p> 
 
    </li> 
 
    <li class="block"> 
 
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
    <li class="block"> 
 
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
    <li class="block"> 
 
    <p>ads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
    <li class="block"> 
 
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
    <li class="block"> 
 
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> 
 

 
    </li> 
 

 
</ul>