Discussion :

[ConceptInterWEB]

Bonjour a tous,

Est-ce possible de répéter plusieurs fois une même DIV selon la largeur de notre page ??

Voici un exemple que j'ai fais auparavant, mais dans un tableau :



Mon tableau a 100%, chaque colonne 25%, et chaque colonne est divisé en 3.

Ce que j’apprécierais c'est que selon la dimension de la largeur et bien au lieu de 4 colonnes, que ca soit 3, et ensuite deux, et peut-être au plus petit une seule.

Dans mon CSS j'ai déjà le code @MEDIA qui fonctionne bien jusqu’à maintenant avec ce que j'ai réalisé.

J'ai commencé quelque chose qui ressemble a ceci :



Le 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
div#header_table {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	margin: 5px 2px;
	padding: 5px 0px;
	border: 2px solid red;
}
 
div#header_table #name {
	display: flex;
	width: 17%;
	justify-content: flex-start;
	align-items: center;
}
 
div#header_table #first {
	display: flex;
	width: 4%;
	justify-content: flex-start;
	align-items: center;
}
 
div#header_table #second {
	display: flex;
	width: 4%;
	justify-content: flex-start;
	align-items: center;
}

Le CODE HTML

Code HTML :

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

1
2
3
4
5
	<div id="header_table">
		<div id="name">List Name</div>
		<div id="first">1st</div>
		<div id="second">2nd</div>
	</div>

Je crois que j'aurais besoin de JAVASCRIPT est-ce possible ?

Merci pour votre aide

[Doksuri]

salut, les media query sont ce qu'il te faut developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries

Code css :

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

@media (min-width: 300px) { ... }

ou max-width si tu preferes

[ConceptInterWEB]

J'ai déjà tout ça comme indiqué plus haut dans mon message....

En fait c'est l’entête du tableau qui doit s'ajuster selon la largeur.

Je ne sais pas si je suis clair ?

[NoSmoking]

Bonjour,

Je crois que j'aurais besoin de JAVASCRIPT est-ce possible ?

pas forcément en utilisant les média queries, comme dit, un modèle de boîte flexible, le fameux display:flex et l'affichage/masquage d'éléments suivant le cas.

Plutôt qu'un long discours, tout est dit dans cet exemple en ligne :

• Nombre de colonnes variable

Si besoin de plus d'informations n'hésite pas

[ConceptInterWEB]

Je vais aller lire cet exemple avec minutie et si besoin je vous reviens avec des questions.

Mes DISPLAY sont déjà en FLEX dont ça devrait être assez simple a adapter.