Positionieren eines Div in der Nähe der Unterseite eines anderen Div

102

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

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

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

Geben Sie hier die Bildbeschreibung ein

html css layout

— römisch
quelle

Ist die Höhe auch elastisch? Wenn nicht, können Sie den Rand oben für die innere Box auf (OuterBoxHeight - InnerBoxHeight) setzen.

— Peirix

@peirix: Ja, die Höhe des äußeren Blocks kann sich ändern und wir wissen es nicht

— Roman

79

Getestet und funktioniert mit 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/

— RichieHindle
quelle

Vielen Dank, Ihre Lösung ist fast richtig. Ich musste nur "// margin-left: -40px" zum Stil des grünen Blocks für IE hinzufügen. Ohne diesen Hack mit dem Attribut margin-left wurde Ihr grüner Block im IE7 links angeordnet. Kann mir jemand erklären, woher diese 40px kommen?

— Roman

IE7 positionierte das grüne Div horizontal nach dem Wort "Outer". Ich habe den Code aktualisiert, um "left: 0" anzugeben.

— RichieHindle

13

Sie benötigen ein Wrapping-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>

— Magnar
quelle

7

CSS3 Flexboxermöglicht die einfache Positionierung des Bodens. Überprüfen Sie die Flexbox-Supporttabelle

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:

Code-Snippet anzeigen

.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>

Erweitern Sie das Snippet

— m4n0
quelle

5

Funktioniert gut in 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>

— Dmitri Farkov
quelle

Die oberen 95% sind nicht dasselbe wie die unteren 10px. Sie möchten, dass die innere Box unten verankert wird, wenn die Größe des Bildschirms geändert wird.

— user959690