Déplacer des DIV en responsive
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:
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:
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...
