Discussion :

[Casio]

Salutations,

J'ai un cartouche comprenant 3 blocs (TD) dans une table.
Je suis en train de passer cela en DIV pour être plus propre, et tant qu'a faire le rendre responsive.

J'ai donc 3 blocs "A" / "B" / "C" en une seule ligne en mode navigateur ordinateur.
L'idée serait de passer les blocs "A" et "C" au dessus, et "B" en dessous des deux, en mode responsive.

Voila mon avancement actuel :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="contain_locaux">
	<div class="photo_locaux">
		Photo du local
	</div>
	<div class="cartouche_locaux">
		Adresse postale du local
	</div>
	<div class="map_locaux">
		Carte du local
	</div>
</div>

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
/* Encarts locaux */
div.contain_locaux {
	width: 90%;
	display: inline-block;
	height: auto;
	position: relative;
}
div.photo_locaux {
	width: 160px;
	height: 160px;
	float: left;
}
div.map.locaux {
	width: 200px;
	height: 200px;
	float: left;
}
div.cartouche_locaux {
	width: auto;
	height: auto;
	float: left;
}
 
/* ------------------------------- */
/* Responsive : (fenetres de moins de xxxx px)*/
@media screen and (max-width: 1015px) {
 
	/* Encarts locaux */
	div.contain_locaux {
		height: 400px;
	}
	div.photo_locaux {
		float: none;
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	div.map_locaux {
		float: none;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	div.cartouche_locaux {
		float: none;
		position: absolute;
		top: 200px;
		left: 200px;
	}
}

C'est immonde, et je ne sais pas pourquoi le bloc "A" passe en dessous du bloc "C" en responsive.

Aucun moyen de faire en sorte de centrer cela ? Ne pas utiliser les "top"/"left"/ ... ?

Merci de votre aide...

[NoSmoking]

Bonjour,
c'est typiquement le service que peut te rendre l'utilisation des « Flex-Box ».

L'idée étant d'avoir au départ une structure HTML du style de

Code html :

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

1
2
3
4
5
<div class="flex-row">
  <div>Contenu A</div>
  <div>Contenu B</div>
  <div>Contenu C</div>
</div>

avec le CSS par défaut suivant

Code css :

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

1
2
3
4
5
6
7
8
.flex-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-row > div {
  width: 33.3333%;
}

puis en utilisant les MediaQueries il suffit de modifier la largeur des éléments et l'ordre d'affichage du 2^éme élément, par exemple

Code css :

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

1
2
3
4
5
6
7
8
@media(max-width:640px) {
  .flex-row > div {
    width: 50%;
  }
  .flex-row :nth-child(2) {
    order: 3;
  }
}

que du bonheur !

[phpame]

Super !!!
Je cherchais à faire quelque chose de semblable depuis qques heures.
Je m'en suis inspiré et cela répond parfaitement à mon besoin.
Merci bcp NoSmoking