flotteur dynamique gauche UL dans un flotteur gauche DIV

Question

Je suis en train d'atteindre le comportement suivant:

Sur un site Search Results, j'ai deux conteneurs.

Container 1 et Container 2 sont DIV avec la propriété float: left.

À l'intérieur Container 2 est un UL avec une quantité variable de LI éléments.

Container 1 est visible que si la recherche est retourné les entrées correspondantes. Il peut donc arriver que Container 1 ne soit pas présent dans le code HTML.

Dans ce cas, je veux Container 2 d'être pleine largeur et les LI éléments à float: left

Ou si la largeur du port de vue (mise en page réactif) ne rentre pas dans les deux conteneurs, Container 2 s'effondre sur une nouvelle ligne. Dans ce cas, je veux aussi Container 2 d'être pleine largeur un des LI éléments à float: left

Quand je simplement mis le LI-float: left l'ensemble Container 2 effondrements déjà à une nouvelle ligne. Aussi, en essayant de définir alternativement le LI à display: inline-block etc Container 2 s'effondre.

Connaissez-vous une manière élégante de résoudre ceci avec CSS? J'ai essayé plusieurs approches, mais ça ne marche pas.

jsFiddle: https://jsfiddle.net/y8vctgun/1/

Answer 1

Donc, si le container1 est complètement retiré du html quand aucun résultat ne présente alors vous pouvez le faire en CSS comme si ...

.container1 + .container2 li { 
    float: none!Important; 
} 

.container2 ul li { 
    float: left; 

    margin-right: 20px; 
    padding: 4px; 
    background-color: #0f0; 
    color: #000; 
} 

Donc, pour expliquer. J'ai ajouté float: left à l'élément li et si container1 est présent, je l'écrase avec float: none. Ajustez-le à vos besoins.