Discussion :

[Mr N.]

Salut les gens

J'ai un petit défi technique à vous soumettre.

J'ai une série de blocs. Nommons les A, B, C, D, E, F, G et H
Là y en a 8 mais je peux en avoir moins ou plus.
Je souhaite les afficher les uns à côté des autres.

Facile me direz vous, il suffit d'utiliser float:left;
En effet ça produit ceci:


Le problème c'est que mes blocs, comme le montre ma capture ci-dessus sont de dimensions différentes. ça pose des problème à partir du moment où l'espace disponible sur la largeur de la page n'est pas suffisant pour les caser tous (taille du viewport différents en fonction des clients, nombre de blocs important, ...).

Par exemple, si je redimensionne mon browser, le layout va donner quelque chose de... artistique (pour ne pas dire moche) :


Ce que je souhaiterais, c'est que mes blocs soient correctement alignés. Que le block D se retrouve sous A et non pas perdus dans l'espace. En fait comme sur la simulation suivante:


Est-ce que quelqu'un saurait comment permettre le fonctionnement attendu ? Abandonner le float:right ? Utiliser un autre type de display comme table-cell ? Je suis ouvert à toutes propositions... compatible IE/Fx il va de soi

Voici mon code:

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
<html>
    <head>
        <style type="text/css">
        .block {
            text-align:center;
            border:1px solid blue;
            margin:1px;
            float:left;
        }
        #A { height: 4em; width:  4em; border-color: blue;      background: lightblue; }
        #B { height: 3em; width:  3em; border-color: red;       background: lightsalmon; }
        #C { height: 2em;  width: 2em; border-color: orange;    background: oldlace; }
        #D { height: 5em; width:  4em; border-color: green;     background: lightgreen; }
        #E { height: 3em; width:  3em; border-color: purple;    background: lavender; }
        #F { height: 2em; width:  2em; border-color: gray;      background: lightgray; }
        #G { height: 4em; width:  4em; border-color: firebrick; background: pink; }
        #H { height: 3em;  width: 3em; border-color: cyan;      background: lightcyan; }
        </style>
    </head>
    <body>
        <div>
            <div id="A" class="block">A</div>
            <div id="B" class="block">B</div>
            <div id="C" class="block">C</div>
            <div id="D" class="block">D</div>
            <div id="E" class="block">E</div>
            <div id="F" class="block">F</div>
            <div id="G" class="block">G</div>
            <div id="H" class="block">H</div>
        </div>
    </body>
</html>

Tout en sachant que je ne connais pas à priori les dimensions d'un bloc lorsque je génère le html, là c'est juste pour les tests que la taille est spécifiée.

Merci

[c_s_s]

Salut,

La propriété inline-block est peut-être la solution :

Code css :

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

1
2
3
4
5
6
7
8
9
.block {
	text-align:center;
	border:1px solid blue;
	margin:1px;            
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	vertical-align:top;
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div>
	<span id="A" class="block">A</span>
	<span id="B" class="block">B</span>
	<span id="C" class="block">C</span>
	<span id="D" class="block">D</span>
	<span id="E" class="block">E</span>
	<span id="F" class="block">F</span>
	<span id="G" class="block">G</span>
	<span id="H" class="block">H</span>
</div>

[Mr N.]

Par contre ça me gène de mettre des tables et autres blocs à l'intérieur d'un span, alors je garde mes blocs (en fait des ul/li) et j'applique un hack pour IE:
http://foohack.com/2007/11/cross-bro...block-styling/

J'évite autant que faire ce peut les hacks mais le bénéfices est trop grand pour le mettre de coté.

Merci !