Discussion :

[td1711]

Bonjour, je souhaite créer un cadre qui contient d'autres cadres nommés "objet". L'objectif est de les répartir sur plusieurs lignes du cadre de sorte à ce qu'ils soient 4 par ligne, qu'ils aient les mêmes dimensions et qu'ils prennent toute la longueur de la ligne uniquement si celle ci est complète

Voici mon

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
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
<div class = "cadre">
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image1">
		<p>Texte1</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image2">
		<p>Texte2</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image3">
		<p>Texte3</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image4">
		<p>Texte4</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image5">
		<p>Texte5</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image6">
		<p>Texte6</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image7">
		<p>Texte7</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image8">
		<p>Texte8</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image9">
		<p>Texte9</p>
		</a>
	</div>
</div>

Et voici mon code css pour le moment :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.cadre{
	margin-top : 50px;
	background-color : lightgrey;
	display : flex;
	flex-wrap : wrap;
}
 
.objet{
	border-color : white;
	border-style : solid;
	border-width : 1px;
}

Lorsqu'il n'y a plus de place sur la ligne les objets passent en dessous cependant il reste du vide à droite et j'aimerai donc que les objets occupent toute la longueur ( sauf pour le dernier car il est seul sur sa ligne, il doit donc garder les mêmes dimensions que les autres )
Je vous donne un aperçu en image de ce que je souhaiterai avoir pour que vous puissiez mieux comprendre

J'espère que vous saurez m'aider, merci pour vos réponses !

[jreaux62]

Bonjour,

voir :

• flexbox
• A Complete Guide to Flexbox

Ici, pour passer à la ligne automatiquement :

Code css :

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

.cadre { display:flex; flex-wrap:wrap; }

Pour 4 / ligne :

Code css :

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

.cadre > .objet { flex:1 1 25%; }

[td1711]

Ce n'est pas encore exactement ce que je veux car le neuvième objet occupe toute la longueur alors qu'il doit faire la même taille que les autres et aussi il faudrait que les images s'agrandissent pour occuper toute la ligne

[jreaux62]

• Merci de montrer ton code...
• Il faut LIRE la doc, aussi...

Code css :

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

.cadre > .objet { flex:0 1 25%; }

Pour les images... je ne vais pas non plus t'écrire tout le code.

[td1711]

J'ai lu la documentation mais j'ai beaucoup de mal à comprendre et à l'appliquer à mon code

Mon

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
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
<div class = "cadre">
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/catadioptriquet.png">
		<p>Texte1</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/newtont.png">
		<p>Texte2</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image3">
		<p>Texte3</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image4">
		<p>Texte4</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image5">
		<p>Texte5</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image6">
		<p>Texte6</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image7">
		<p>Texte7</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image8">
		<p>Texte8</p>
		</a>
	</div>
	<div class = "objet">
		<a href = "">
		<img src = "IMAGES/image9">
		<p>Texte9</p>
		</a>
	</div>
</div>

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
.cadre{
	background-color : lightgrey;
	display : flex;
	flex-wrap : wrap;
}
 
.cadre > .objet {
	flex : 0 1 25%;
}
 
.objet{
	border-color : white;
	border-style : solid;
	border-width : 1px
}
 
.objet:hover{
	background-color : white;
	border-color : black;
}

[td1711]

C'est bon je crois avoir réussi

[jreaux62]

Merci de :

• montrer ton code (pour partager avec les autres)
• passer la discussion en "résolue"

Voir :

• https://codepen.io/jreaux62/pen/rNGGqyL