1486 sujets

Web Mobile et responsive web design

[Résolu] Grid layout div qui ne veulent pas s'aligner

Bonjour bonjour,
Je commence avec le css grid layout, et j'ai décidé d'utiliser le framework knacss (j'ai comme l'impression d'être au bon endroit Smiley cligne )

J'ai un petit soucis de div (les deux div class="col-5") qui ne veulent pas s'aligner, pourtant mon code me semble correct... Un idée quelqu'un ??

PS : Oui, je sais, j'ai mis du style directement dans les balises, c'est caca boudin, mais c'est pour un test... Smiley cligne 


<div class="grid-12-small-1 ">
        <footer style="background-color: darkorange; height:100 px; width: 100vw">
            <div class="col-5 large-inbl">
                <ul>
                    <li><span>Truc</span></li>
                    <li><span>Truc</span></li>
                    <li><span>Truc</span></li>
                </ul>
                
            </div>
            <div class="col-5 large-inbl">
                <ul>
                    <li><span>Truc</span></li>
                    <li><span>Truc</span></li>
                    <li><span>Truc</span></li>
                </ul>
            </div>
        </footer>
    </div>

Modifié par Piflo (24 Jun 2019 - 12:27)
Salut
c'est pour signifier que la grid s'étale sur 12 colonnes et que quand on est sur un petit device elle ne s'étale que sur une colonne...
Mais je veux que que les 2 div col-5 s'alignent quand on est sur un écran large...
Administrateur
Hello Piflo,

En fait, tes éléments de classe "col-5" ne sont... pas enfants de ta grille "grid-12-small-1" donc rien ne peut se passer.

A priori il suffit de supprimer ton div global et de déplacer class="grid-12-small-1 " directement sur l'élément footer.

EDIT : je confirme, cela fonctionne.

<footer class="grid-12-small-1 " style="background-color: darkorange; height:100 px; width: 100vw">
  <div class="col-5 large-inbl">
    <ul>
      <li><span>Truc</span></li>
      <li><span>Truc</span></li>
      <li><span>Truc</span></li>
    </ul>

  </div>
  <div class="col-5 large-inbl">
    <ul>
      <li><span>Truc</span></li>
      <li><span>Truc</span></li>
      <li><span>Truc</span></li>
    </ul>
  </div>
</footer>

Modifié par Raphael (25 Jun 2019 - 11:08)
Meilleure solution
Sujet clos
Aller à