28172 sujets

CSS et mise en forme, CSS3

[Résolu] Répartir l'espace entre des éléments sur plusieurs lignes

Salut,

J'ai une liste d’images que je voudrais répartir sur plusieurs lignes, pour remplir la ligne sur toute la largeur de mon template.

Mon CMS me donne ça comme code :

<div class="item-list">
<ul>          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.png" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.png" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
          <li class="">  
  <div>        <span class="resp vignette"><img typeof="foaf:Image" src="http://www.domaine.fr/image.jpg" width="325" height="260" /></span>  </div></li>
</ul>
</div>


Ma CSS :

.item-list li {
      /* On crée d'abord un context flex */
      display: flex;

      /* Puis on définit la direction du flux et le wrap
       * Rappelez-vous que c'est la même chose que :
       * flex-direction: row;
       * flex-wrap: wrap;
       */
      flex-flow: row wrap;

      /* Puis on définit la façon dont se répartit l'espace restant */
      justify-content: space-around;
  padding-bottom: 20px;
}
.resp img {
  max-width: 100%; /* pour limiter la taille à la largeur du parent */
  height: auto; /* pour conserver le ratio, même si un attribut height est précisé dans le code HTML */
  box-sizing: border-box; /* pour limiter à 100% de la largeur, même si des paddings ou bordures sont appliquées à l’élément */
}


Avant j'avais un float:left sur les vignettes, les éléments s'affichaient les uns après les autres jusqu'à remplir une ligne, mais l'espace n'était pas distribué de façon équitable.

J'ai donc tenté avec flex, mais je dois avouer ne pas encore maîtriser le truc.

Merci de votre aide;
Modifié par myself (20 Jun 2016 - 21:46)
Modérateur
Apparement ce n'est pas <li> qu'il faudrait cibler mais plutot <ul> comme boite flexible et lui donner une hauteur . En tout cas, ton code est incomplet pour te donner une reponse plus précise.

Cdt,
En effet, tu as raison. Ça marche à présent, si ce n'est que la colonne qui est la plus à gauche a un retrait (comme s'il y avait un padding), et idem pour la colonne toute à droite.

Tu sais comment je peux en quelque sorte justifier les colonnes sur toute la largeur de mon template ?

http://pix.toile-libre.org/upload/thumb/1466489666.png

Merci
Modifié par myself (21 Jun 2016 - 08:16)
Sujet clos
Aller à