J’ai div externe et div interne. Je dois placer la div interne au bas de la partie externe.
La div externe est élastique (largeur: 70% par exemple). Je dois aussi centrer le bloc intérieur.
Le modèle simple de maquillage décrit est montré sur l’image ci-dessous:
Testé et fonctionnant sur Firefox 3, Chrome 1 et IE 6, 7 et 8:
Outer Inner
Version en direct ici: http://jsfiddle.net/RichieHindle/CresX/
Vous avez besoin d’un div wrapping pour le bas afin de le centrer.
Fonctionne bien sur tous les navigateurs, y compris ie6.
CSS3 Flexbox
permet le positionnement du fond très facilement. Vérifiez le tableau de support Flexbox
HTML
CSS
.outer { display: flex; justify-content: center; /* Center content inside */ } .inner { align-self: flex-end; /* At the bottom of the parent */ }
Sortie:
.outer { background: #F2F2CD; display: flex; width: 70%; height: 200px; border: 2px solid #C2C2C3; justify-content: center; } .inner { background: #FF0081; width: 75px; height: 50px; border: 2px solid #810000; align-self: flex-end; }