27858 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'utilise Knacss pour créer le template d'un site et je me retrouve avec un comportement que je n'arrive pas à comprendre de la part des div contenue dans une grille...

J'ai une section sur une grid-4 comportant 4 div (niveau 1) contenant chacun 2 div (niveau 2). Les div de niveau 2 comportes des images de hauteurs différentes et le plus grand définissant la hauteur des 3 autres de la section (fonctionnement normal et attendu). Mon problème est le placement vertical des div de niveau 2, ils se répartissent l'espace vertical du coups le 1er div de chaque niveau 1 (h2 bloc 1, h2 bloc 2, h2 bloc 3, h2 bloc 4) n'ont pas la même hauteur. Je pourrait fixer la hauteur mais je m'attends à un comportement pas très responsive.

Est-ce qu'il y a moyen de "forcer" les div niveau 2 à s'aligner verticalement en haut et de garder la hauteur de leur contenue ?


En code cela sera peut-être plus clair Smiley smile

<section id="gamme" class="grid-4-small-1 has-gutter-xl margin-top-5 padding-left-5 padding-right-5">
  /* -- bloc 1 -- */
  <div class="grid-1 has-gutter-xl gamme-gradient">/*-- niveau 1 --/*
    <div class="gamme-name"><h2 class="txt-1-2 txtcenter uppercase">bloc 1</h2></div>/*-- niveau 2 --/*
    <div class="grid-1 has-gutter">/*-- niveau 2 --/*
      <div class="center"><a href="#"><img src="image.png" /></a></div> 
      <div class="center"><a href="#"><img src="image.png" /></a></div>
      <div class="center"><a href="#"><img src="image.png" /></a></div>
    </div>
  </div>
  /* -- bloc 2 -- */
  <div class="grid-1 has-gutter-xl gamme-gradient">/*-- niveau 1 --/*
    <div class="gamme-name"><h2 class="txt-1-2 txtcenter uppercase">bloc 2</h2></div>/*-- niveau 2 --/*
    <div class="grid-1 has-gutter">/*-- niveau 2 --/*
      <div class="center"><a href="#"><img src="image.png" /></a></div>
      <div class="center"><a href="#"><img src="image.png" /></a></div>
      <div class="center"><a href="#"><img src="image.png" /></a></div>
    </div>
  </div>
  /* -- bloc 3 -- */
  <div class="grid-1 has-gutter-xl gamme-gradient">/*-- niveau 1 --/*
    <div class="gamme-name"><h2 class="txt-1-2 txtcenter uppercase">bloc 3</h2></div>/*-- niveau 2 --/*
    <div class="grid-1 has-gutter">/*-- niveau 2 --/*
      <div class="center"><a href="#"><img src="image.png" /></a></div>
      <div class="center"><a href="#"><img src="image.png" /></a></div>
      <div class="center"><a href="#"><img src="image.png" /></a></div>
    </div>
  </div>
  /* -- bloc 4 -- */
  <div class="grid-1 has-gutter-xl gamme-gradient">/*-- niveau 1 --/*
    <div class="gamme-name"><h2 class="txt-1-2 txtcenter uppercase">bloc 4</h2></div>/*-- niveau 2 --/*
    <div class="grid-1 has-gutter">/*-- niveau 2 --/*
      <div class="center"><a href="#"><img src="image.png" /></a></div>
      <div class="center"><a href="#"><img src="image.png" /></a></div>
    </div>
  </div>
</section>