web-dev-qa-db-fra.com

Positionner une div près du bas d'une autre div

J'ai div externe et div interne. J'ai besoin de placer div intérieur au bas de l'externe.

La largeur extérieure est élastique (largeur: 70% par exemple). J'ai aussi besoin de centrer le bloc intérieur.

Un modèle simple de maquillage décrit est montré sur l'image ci-dessous:

enter image description here

htmlcsslayout
101
Roman

Testé et fonctionnant sous Firefox 3, Chrome 1 et IE 6, 7 et 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: Magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

Version en direct ici: http://jsfiddle.net/RichieHindle/CresX/

79
RichieHindle

Vous avez besoin d’une division d’emballage pour celle du bas, afin de la centrer.

<style>
   /* making it look like your Nice illustration */
   #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
   #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }

   /* positioning the boxes correctly */
   #outer { position: relative; }
   #wrapper { position: absolute; bottom: 3px; width: 100%; }
   #inner { margin: 0 auto; }
</style>


<div id="outer">
   <div id="wrapper"><div id="inner"></div></div>
</div>
12
Magnar

CSS3 Flexbox permet le positionnement du fond très facilement. Consultez le table d’assistance Flexbox

[~ # ~] html [~ # ~] 

<div class="outer">
  <div class="inner">
  </div>
</div>

[~ # ~] 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;
}
<div class="outer">
  <div class="inner">
  </div>
</div>
6
Manoj Kumar

Fonctionne bien sur tous les navigateurs, y compris ie6.

<style>
    #outer{
        width: 70%;
        background-color: #F2F2CC;
        border: 1px solid #C0C0C0;
        height: 500px;
        position: relative;
        text-align: center;
    }

    #inner{
        background-color: #FF0080;
        border: 1px solid black;
        width: 30px;
        height: 20px;

        /* Position at the bottom */
        position: relative;
        top: 95%;

        /* Center */
        margin: 0 auto;
        text-align: left;
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>
5
Dmitri Farkov