retour ligne intélligent avec l'utilisation de DIV

**bébé** · 21/08/2005, 21h50

Bonsoir,

J'ai un div général qui regroupe un ensemble de photo miniatures chacune d'elles ayant un div propre qui est généré dynamiquement en php. J'ai un retour à la ligne à chaque miniature qui m'ennui. J'aimerai que les miniatures remplissent le div général et sautent une ligne une fois la ligne précédente est remplie.

Merci,

bb,

**ilood** · 21/08/2005, 21h53

Salut,

Les div qui contiennent les miniatures doivent être mises en float: left grâce au css.

**bébé** · 21/08/2005, 22h23

et sa sautera la ligne tout seul des qu'il n'y aura plus de place ?

**ilood** · 21/08/2005, 22h42

As-tu essayé ?
Voilà un exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
.mini {
        float: left;
}
</style>
</head>
 
<body>
<div id="conteneur">
	<div class="mini"><img src="..." alt="photo1"></div>
	<div class="mini"><img src="..." alt="photo2"></div>
	<div class="mini"><img src="..." alt="photo3"></div>
</div>
</body>

**denisC** · 22/08/2005, 15h42

Sinon, l'attribut CSS:

Code :

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

1
2
 
display: inline;

Devrait aussi faire l'affaire...

**Cracking_Cow** · 22/08/2005, 17h12

...Ou encore en supprimant les marges par défaut assignées au DIV :p.

**ilood** · 22/08/2005, 17h30

Envoyé par Cracking_Cow

...Ou encore en supprimant les marges par défaut assignées au DIV :p.

: Tu peux expliquer plus en détail s'il te plait ? Moi qui croyait qu'un div n'avait pas de marge...

**denisC** · 22/08/2005, 17h35

Exemple (directement récupéré)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
.mini {
        margin:0;
         padding: 0;
}
</style>
</head>
 
<body>
<div id="conteneur">
	<div class="mini"><img src="..." alt="photo1"></div>
	<div class="mini"><img src="..." alt="photo2"></div>
	<div class="mini"><img src="..." alt="photo3"></div>
</div>
</body>

**ilood** · 22/08/2005, 17h46

Je ne vois pas l'interet, ou l'inovation... Cela n'a pas du tout le même comportement que les float

Ou j'ai vraiment pas compris la question initiale, qui était pour moi : Aligner horizontalement des vignettes et faire un retour à la ligne lorsque l'on arrive au bord droit du conteneur.

retour ligne intélligent avec l'utilisation de DIV

HTML

Discussions similaires

Partager

Partager