Discussion :

[misterfredy]

Bonjour, alors je vous explique mon souci.
déjà voici mon code:

Css:

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
56
57
58
59
60
61
62
.test{
	display:block;
	position:relative;
	height: 400px;
	width:100%;
	background-color: #ffffff;
	text-align:center;
}
 
.case_test{
	display:inline-table;
	position:relative;
	width: 700px;
	border: solid 1px #000000;
	margin-top: 50px;
}
 
.carre{
	display:inline-block;
	position:relative;
	width: 23%;
	margin-right: 1%;
	vertical-align:top;
	margin-bottom: 4px;
	background-color:rgba(250,200,56,1);
}
 
.carre:nth-child(4n){
	margin-right:0;
}
 
 
.carre1{
	height: 30px;
}
.carre2{
	height: 34px;
}
.carre3{
	height: 40px;
}
.carre4{
 
	height: 22px;
}
.carre5{
	height: 40px;
}
.carre6{
	height: 25px;
}
.carre7{
	height: 18px;
}
.carre8{
	height: 42px;
}
 
.carre p{
	color: #ffffff;
	text-align:center;
}

HTML:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="test">
 
	<div class="case_test">
    	<div class="carre carre1"><p>1</p></div>
        <div class="carre carre2"><p>2</p></div>
        <div class="carre carre3"><p>3</p></div>
        <div class="carre carre4"><p>4</p></div>
        <div class="carre carre5"><p>5</p></div>
        <div class="carre carre6"><p>6</p></div>
        <div class="carre carre7"><p>7</p></div>
        <div class="carre carre8"><p>8</p></div>
    </div>
 
</div>

ou le voici sur JSFiddle : https://jsfiddle.net/cr7m8qgc/

j'aimerais que dans le cadre ".case_test" les "carre" reste aligner dans le même ordre mais j'aimerai que l'espacement entre 2 carrés (en haut et en bas) reste le même, qu'importe la hauteur de la carre.
Je doute que ce soit possible uniquement en CSS mais j'ai quand même un petit espoir.
Merci de votre aide.

[Invité]

Bonjour,

il faudrait que tu nous montres en image le résultat que tu souhaites obtenir, car je n'ai rien compris aux "explications"...

[exe2bin]

j'aimerais que dans le cadre ".case_test" les "carre" reste aligner dans le même ordre mais j'aimerai que l'espacement entre 2 carrés (en haut et en bas) reste le même, qu'importe la hauteur de la carre.
Je doute que ce soit possible uniquement en CSS mais j'ai quand même un petit espoir.
Merci de votre aide.

Je crois que tu devras faire des calculs si tu veux que tes carrés possèdent le même espacement entre eux.
Malheureusement avec les css les calculs sont impossible.
Essaies d'utiliser javascript pour les calculs et pour changer tes styles avec le DOM.