retour ligne intélligent avec l'utilisation de DIV

Version imprimable

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

retour ligne intélligent avec l'utilisation de DIV

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,
21/08/2005, 21h53
ilood

Salut,

Les div qui contiennent les miniatures doivent être mises en float: left grâce au css.
21/08/2005, 22h23
bébé

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

As-tu essayé ?
Voilà un exemple :

Code:

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>

22/08/2005, 15h42
denisC
Sinon, l'attribut CSS:
Code:

1 2 display: inline;
Devrait aussi faire l'affaire...
22/08/2005, 17h12
Cracking_Cow

...Ou encore en supprimant les marges par défaut assignées au DIV :p.
22/08/2005, 17h30
ilood

Citation:

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...

Exemple (directement récupéré)

Code:

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>

22/08/2005, 17h46
ilood

Je ne vois pas l'interet, ou l'inovation... Cela n'a pas du tout le même comportement que les float :roll:
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.

Fuseau horaire GMT +2. Il est actuellement 16h52.