it-swarm.com.de

Positionieren eines Divs nahe der Unterseite eines anderen Divs

Ich habe äußere Div und innere Div. Ich muss das innere div am unteren Rand des äußeren platzieren.

Die äußere Teilung ist elastisch (Breite zum Beispiel: 70%). Ich muss auch den inneren Block zentrieren.

Das folgende Bild zeigt ein einfaches Modell des beschriebenen Make-ups:

enter image description here

101
Roman

Getestet und lauffähig in Firefox 3, Chrome 1 und IE 6, 7 und 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>

Live-Version hier: http://jsfiddle.net/RichieHindle/CresX/

79
RichieHindle

Sie benötigen ein Umhüllungs-Div für das untere, um es zu zentrieren.

<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 ermöglicht die einfache Positionierung des Bodens. Überprüfen Sie die Tabelle Flexbox-Unterstützung

[~ # ~] 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 */
}

Ausgabe:

.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

Funktioniert gut auf allen Browsern, einschließlich 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