X span : adapter la taille de la fenetre d'affichage

**fabrice91** · 02/12/2013, 16h29

Bonjour,

J'ai X span à afficher les uns à côté des autres.
Parfois il peut y en avoir 5 ou 10 ou 20 cela ne pose pas de problème, ils rentrent tous dans la page de mon navigateur.
Mais à partir d'un certain nombre, il s'effectue un retour à la ligne et les blocs se retrouvent sur deux lignes.
Pour cela je devrais fixer un width dans la balise body de 2000 px par exemple mais cela ne me sers à rien lorsque je n'ai que quelques blocs à afficher !
Donc comment afficher tous mes blocs du code ci-dessous sans fixer une taille width pour le body ?
Une idée ?
Voici mon code exemple, le css est dans le code pour une question pratique mais se trouvera evidemment dans un fichier séparé au final :

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
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
<!DOCTYPE html>
<html>
<head>
<title>TITRE</title>
</head>
<style>
.box {
    background-color: #0000FF;
    border-left: 1px solid #FF0000;
    float: left;
    height: 50px;
    position: relative;
    top: 300px;
    width: 50px;
}
</style>
</head>
<body>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
<span class='box'></span>
</body>
</html>

Merci !

**fabrice91** · 02/12/2013, 16h35

En ajoutant au body la règle :

Code :

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

width: -moz-max-content ;

je vois que cela fonctionne, mais je ne sais pas si cela est compatible avec tous les navigateurs...

**NoSmoking** · 02/12/2013, 18h46

Bonjour,
tu pourrais également passer par un conteneur, un P par exemple, avec la propriété white-space:nowrap et dans ce cas mettre tes "box" en display:inline-block.

Invité · 03/12/2013, 11h26

Bonjour,
Une astuce, avant que tu ne poses la question :

"pourquoi y a-t-il un espace entre les span avec display:inline-block ??"

=> ajouter des  !
=> http://codepen.io/jreaux62/pen/ptjcm

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="boxconteneur">
	<span class="box">zefr erzedfgrz</span><!--
	--><span class="box">zesdfgfr erzerz</span><!--
	--><span class="box">zefr erzesdfg sdfgrz</span><!--
[...]
	--><span class="box">zefr erzerz</span><!--
	--><span class="box">zesdfg sdgsdfgfr erzerz</span><!--
	--><span class="box">zefr erzerz</span>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.boxconteneur {
    position: absolute;
	top:200px;
	white-space:nowrap;
}
.box {
    color:white;
	background-color: #0000FF;
    border-left: 1px solid #FF0000;
    padding: 10px;
	margin:0;
    position: relative;
	display:inline-block;
}

**fabrice91** · 03/12/2013, 12h24

Envoyé par jreaux62

Bonjour,
Une astuce, avant que tu ne poses la question :

=> ajouter des  !

Merci pour les infos, je vais tester ça, par contre je n'ai pas compris cette histoire d'astuce...
Y a une explication quelque part du pourquoi ?
Parce que ce "code" c'est l'ajout de commentaire, non ?
Et en plus la première et la dernière ligne ne sont pas identiques...
Faut le gérer pour une construction dynamique de la page...

Invité · 03/12/2013, 12h27

C'est le même principe que pour les images (qui sont aussi par défaut en display:inline-block;)

Si tu écris dans ton code :

Code html :

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

1
2
3
<img src="..../image1" />
<img src="..../image2" />
<img src="..../image3" />

=> il y aura un espace entre les images.
Il semble que les passages à la ligne dans le code soient interprétés par display:inline-block; (-> ajout d'un espace).

Pour l'éviter, on doit écrire :

Code html :

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

<img src="..../image1" /><img src="..../image2" /><img src="..../image3" />

OU (astuce !) :

Code html :

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

1
2
3
<img src="..../image1" /><!--
--><img src="..../image2" /><!--
--><img src="..../image3" />

On met en "commentaire" les passages à la ligne dans le code.

N.B. Rien ne t'empêche de tester par toi-même...

X span : adapter la taille de la fenetre d'affichage

CSS

Vue hybride

Discussions similaires

Partager

Partager