Inline-block avec marge en trop

**Azharis** · 16/01/2013, 21h32

Bonjour,

Je souhaite afficher une liste d'objet (par exemple des photos) côte à côte afin que ça remplisse la largeur puis que ça passe à la ligne.

Float permet de faire ça mais je préfère utiliser Inline-block avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.Photo {
 display : inline-block;
 vertical-align : top;
 margin : 8px;
 border : solid 1px black;
 width : 80px;
}

De cette manière, chaque photos s'affiche à côté de la précédente et quand elles n'ont plus la place elles continuent en-dessous.

Là où le problème se pose, c'est que suivant les dimensions du conteneur, la marge droite d'un l'élément ne lui permet pas de se positionner à la droite de son prédécesseur mais en-dessous, ce qui graphiquement pose un problème puisque ça donne l'impression qu'il peut rentrer.

Concrètement, si le conteneur fait 395px, et que chaque photo prend 100 pixels (exemple ci-dessus), il n'en rentre que 3 alors que si le quatrième élément n'avait pas de marge droite, il en rentrerait 4.

On peut corriger ce problème si on connait d'avance la dimension du conteneur mais je ne trouve pas de solutions si le conteneur est dynamique.

J'ai également essayé d'utiliser la propriété table-cell de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.Conteneur {
 display : table;
 border-collapse : separate;
 border-spacing : 10px;
}
 
.Photo {
 display : table-cell;
 width : 80px;
}

Mais le problème est exactement le même.

Une autre solutions est aussi de mettre qu'une marge a gauche et pas à droite mais du coup l'alignement à gauche est décalé.

Je vous remercie d'avance pour votre aide si vous avez une solution.

Je précise que je suis un utilisateur avancé de CSS et qu'on ne sait pas d'avance le nombre d'éléments qu'il y aura par ligne.

Des éléments de réponses serait de réussir à sélectionner des éléments frères sans retour à la ligne entre les deux ou que le tests de largeur pour le passage à la ligne se fasse sans les marges mais je ne trouve rien en CSS pour faire ce genre de choses.

**NoSmoking** · 18/01/2013, 14h07

Bonjour,

Une autre solutions est aussi de mettre qu'une marge a gauche et pas à droite mais du coup l'alignement à gauche est décalé.

dans ce cas mets un padding à gauche et une margin à droite

**Azharis** · 18/01/2013, 16h45

Ca ferait pareil.
Le but est vraiment que les éléments remplissent intégralement le conteneur.

Mais je crois que ce n'est pas possible, sauf en javascript mais je souhaite le faire qu'en CSS.

**NoSmoking** · 18/01/2013, 18h32

Mais je crois que ce n'est pas possible, sauf en javascript mais je souhaite le faire qu'en CSS.

je n'avais pas fait attention à la première lecture, mais ton problème vient du whitespace, l'affreux, lié aux éléments de type inline, comme les images le sont par défaut.

Pour résoudre ce soucis il existe plusieurs solutions dont
- la mise à zéro de la taille de la police
- la mise bout à bout de toutes les balises
- la mise en commentaires des espaces entre les balises
il y en à d'autres mais...

Un fichier de test

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[White Space]</title>
<meta name="Author" content="NoSmoking">
<style>
.content{
  width:395px;
  background-color:#ABC;
  margin:0 25px;
}
#content_2{
  font-size:0px;
}
img {
 margin:8px;
 border:solid 1px black;
 width:80px;
}
</style>
<script>
</script>
</head>
<body>
Le problème du <code>whitespace</code>
<div class="content">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
</div>
Avec <code>font-size:0px;</code>
<div class="content" id="content_2">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
</div>
Toutes les balises à la suite
<div class="content">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo"><img src="http://www.developpez.net/template/images/logo.png" alt="logo"><img src="http://www.developpez.net/template/images/logo.png" alt="logo"><img src="http://www.developpez.net/template/images/logo.png" alt="logo"><img src="http://www.developpez.net/template/images/logo.png" alt="logo"><img src="http://www.developpez.net/template/images/logo.png" alt="logo">
</div>
Mise en commentaire des espaces entre balises
<div class="content">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo"><!--
--><img src="http://www.developpez.net/template/images/logo.png" alt="logo"><!--
--><img src="http://www.developpez.net/template/images/logo.png" alt="logo"><!--
--><img src="http://www.developpez.net/template/images/logo.png" alt="logo"><!--
--><img src="http://www.developpez.net/template/images/logo.png" alt="logo"><!--
--><img src="http://www.developpez.net/template/images/logo.png" alt="logo">
</div>
</body>
</html>

les 2 dernières me semble les plus efficaces et pérennes.

[EDIT]
il fallait bien sûr lire "...de type inline, comme les images..."

**Azharis** · 19/01/2013, 20h05

Non c'est pas un problème de whitespace.

Voici un exemple imagé :

Le premier cadre utilise toute la largeur du conteneur.

En-dessous, 5 photos séparées entre elles par un margin-right (en jaune).
Dans ce cas-là, la photo 5 ne sera pas comme sur le dessin à cause de la marge, elle se positionnera en-dessous. Ce que j'aurai voulu, c'est que la marge qui ne fait pas partie du contenu ne force pas la photo à passer dessous.

On pourrait le faire avec une ligne du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.Photo:nth-child(5n) {
 margin-right : 0;
}

Mais dans mon cas de base, la largeur du conteneur s'adapte à la largeur de la fenêtre, donc on ne sait pas si il y aura 2,3 ... 5 ou 10 photos par ligne.

**NoSmoking** · 20/01/2013, 09h38

Je ne vois pas dans ce cas comment tu pourrais gérer cela en CSS ne connaissant pas par avance ce qui va être affiché, il te faut à minima fixer un certain nombre de paramètre.

Si tu sais que tu auras x images par ligne tu effectivement avoir recours à .Photo:nth-child(xn).

**Azharis** · 21/01/2013, 08h52

OK, c’est bien ce que je pensais mais je préférai vérifier.

Je mets l'étiquette résolu pour clore la conversation alors.

Merci.

Inline-block avec marge en trop

CSS

Discussions similaires

Partager

Partager