Discussion :

[nil18]

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.

[rodolphebrd]

Bonjour et bienvenue sur developpez.com,

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

[nil18]

Code html :

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

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 :

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

[rodolphebrd]

Je ne vois pas de problème : http://codepen.io/anon/pen/xABzK

[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

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

[nil18]

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

[Candygirl]

Hello,

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 :

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

[rodolphebrd]

Sympa l'idée Candygirl.

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