[CSS 3] alignement horizontal de divs illimité sans scroll [Résolu]

hey16ar · 02/03/2011, 10h21

Bonjour à tous,

Je cherche donc à aligner horizontalement des divs (dont, dans sa version finale je ne connais ni la largeur ni le nombre total) sans retour à la ligne ni barre de scroll

Voilà mon code actuel qui est ce que je veux sauf qu'il y a un retour à la ligne

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
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
.container {
	white-space:nowrap;
	width:auto;
	height:220px;
}
.project {
	border:none;
	height:200px;
	background-color:#999;
	margin:20px;
	float:left;
}
</style>
<body>
<div class="container">
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
</div>
</body>

Jusque là j'utilisais whit-space qui marchait très bien avec des images mais je dois maintenant utiliser des divs...

Merci pour votre aide !

Bisûnûrs · 02/03/2011, 10h37

Quand tu dis que tu ne veux pas de scrollbar, ça veut dire que tes éléments en trop seront masqués ou alors la scrollbar du viewport doit apparaitre et non celle du div container ?

Dans le premier cas, tu dois donner une largeur à ton div container, et lui mettre un overflow:hidden. Si tu veux quand même avoir une largeur dynamique, alors tu seras obligée de l'attribuer en Javascript.

Dans le deuxième cas, supprime le float:left de tes divs et mets display:inline-block à la place.

hey16ar · 02/03/2011, 11h53

Merci pour ta réponse rapide.

Je me situe dans le premier cas à savoir que les div qui dépassent de la zone seront masqués, l'idée étant de les faire scroller ensuite avec jquery. J'ai donc suivi ton conseil mais ça part encore à la ligne (j'ai enlevé le height pour le vérifier) .

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
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
.container {
	white-space:nowrap;
	width:100%;
	overflow:hidden;
}
.project {
	border:none;
	height:200px;
	background-color:#999;
	margin:5px;
	float:left;
}
</style>
<body>
<div class="container">
	<div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
    <div class="project">ssssssssssssssssssssssssssssssssss</div>
</div>
</body>

Bisûnûrs · 02/03/2011, 12h09

Hum, oui, mais ce que je voulais dire par donner une largeur, c'était une largeur non "dynamique", le overflow n'est pas pris en compte dans le cas d'une largeur en %.
D'où ma remarque sur l'affectation de la largeur en Javascript en fonction de la largeur de la fenêtre.

hey16ar · 02/03/2011, 12h51

Citation:

Envoyé par Bisûnûrs

Hum, oui, mais ce que je voulais dire par donner une largeur, c'était une largeur non "dynamique", le overflow n'est pas pris en compte dans le cas d'une largeur en %.
D'où ma remarque sur l'affectation de la largeur en Javascript en fonction de la largeur de la fenêtre.

Ok c'est un peu embêtant mais ça peut être gérable.

J'ai remplacé le 100% par une largeur fixe pour tester et ça va toujours à la ligne. Par ailleurs le overflow:hidden fonctionne même en width:100% (je teste sous firefox)

Bisûnûrs · 02/03/2011, 14h08

Ah oui, pardon, il faut que tu passes tes divs projects en display:inline-block à la place de float:left.
Du coup le width:100% devrait fonctionner.

hey16ar · 02/03/2011, 14h35

ça fonctionne !

Donc pour résumer, il faut passer le container en white-space:nowrap et overflow:hidden et les divs intérieurs en display:inline-block

MERCI !

02/03/2011, 10h37	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Quand tu dis que tu ne veux pas de scrollbar, ça veut dire que tes éléments en trop seront masqués ou alors la scrollbar du viewport doit apparaitre et non celle du div container ? Dans le premier cas, tu dois donner une largeur à ton div container, et lui mettre un overflow:hidden. Si tu veux quand même avoir une largeur dynamique, alors tu seras obligée de l'attribuer en Javascript. Dans le deuxième cas, supprime le float:left de tes divs et mets display:inline-block à la place.
	00

02/03/2011, 12h09	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Hum, oui, mais ce que je voulais dire par donner une largeur, c'était une largeur non "dynamique", le overflow n'est pas pris en compte dans le cas d'une largeur en %. D'où ma remarque sur l'affectation de la largeur en Javascript en fonction de la largeur de la fenêtre.
	00

02/03/2011, 14h08	#6
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Ah oui, pardon, il faut que tu passes tes divs projects en display:inline-block à la place de float:left. Du coup le width:100% devrait fonctionner.
	00

02/03/2011, 14h35	#7
hey16ar Invité de passage Inscription : mars 2011 Messages : 4 Détails du profil Informations forums : Inscription : mars 2011 Messages : 4 Points : 1 Points : 1	ça fonctionne ! Donc pour résumer, il faut passer le container en white-space:nowrap et overflow:hidden et les divs intérieurs en display:inline-block MERCI !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email