Alignement des div

Version imprimable

11/05/2014, 14h07
nil18

Alignement des div

bonjour,

Je veux aligner mes div verticalement et tous ce qui dépasse le div parent remonte automatiquement en haut... quelqu'un peu m'aider???
C'est du genre inline-block mais inline-block le fait horizontalement mais moi j'aimerais le faire verticalement.... genre système d'icônes de windows.
11/05/2014, 15h25
rodolphebrd

Bonjour et bienvenue sur developpez.com,

Il faudrait poster du code pour mieux cerner le problème.

Code:

1
2
3
4
5
6
7
8
9
10
11
<div class="cb">	
		<div class="crac" id="rac" onclick="izy('rac');"></div>		
		<div class="crac"></div>
		<div class="crac"></div>
		<div class="crac"></div>
		<div class="crac"></div>
		<div class="crac"></div>
                <div class="crac"></div>
		<div class="crac"></div>
		<div class="crac"></div>
</div>

le css c'est:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.cb{
width:100%; 
height:300px;
background:red;
border-radius:4px;
border:1px solid #000;
overflow:hidden;
}
.crac{
    width:50px; 
    height:50px;
    border: 1px solid transparent;
    color: #FFF;
    background:#000;
    margin:1px;
}

11/05/2014, 18h42
rodolphebrd

Je ne vois pas de problème : http://codepen.io/anon/pen/xABzK
11/05/2014, 19h14
nil18

le problème c'est que lorsque les div dépasse le largeur du div parent,je veux que se qui dépasse monte automatiquement en haut a droit
11/05/2014, 20h09
rodolphebrd

Ok je vois.

Il y a une possibilité en CSS mais l'ordre des DIV ne va pas être celui voulu. http://codepen.io/anon/pen/rjotA

Sinon pour un effet plus poussé il faudra voir en Javascript ou des solutions toutes faites comme masonry.

Hello,

Citation:

Envoyé par nil18

le problème c'est que lorsque les div dépasse le largeur du div parent,je veux que se qui dépasse monte automatiquement en haut a droit

Tu ne voulais pas plutôt parler de "la hauteur du div parent" plutôt que largeur ?

Cela pourrait être fait avec la propriété writing-mode, par exemple, mais pas encore implémentée sur FF...
Code:

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 .cb{ -ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr; width:200px; height:300px; background:red; border-radius:4px; border:1px solid #000; } .crac{ -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; width:50px; height:50px; color: #FFF; background:#000; margin:1px; display:inline-block; }
Ce n'est probablement pas la manière la plus efficace mais c'est l'idée qui me venait vite fait ;)

12/05/2014, 10h33
rodolphebrd

Sympa l'idée Candygirl. :ccool:

A ce que tu as mis j'ajouterais un transform: rotate(-90deg); à l'élément .crac : http://codepen.io/rodolpheb/pen/znItk
17/05/2014, 23h35
nil18

le problème c'est que quand on augmente le width du div cb alors on a le même que ce du inline-block
17/05/2014, 23h37
nil18

Citation:

Envoyé par rodolphebrd

Ok je vois.

Il y a une possibilité en CSS mais l'ordre des DIV ne va pas être celui voulu. http://codepen.io/anon/pen/rjotA

Sinon pour un effet plus poussé il faudra voir en Javascript ou des solutions toutes faites comme masonry.

merci pour ton idée, je vais ajouté du javascript