Richten Sie die DIVs nach unten oder nach Grundlinie aus

Ich versuche, richten Sie ein Kind div-tag auf der Unterseite oder an der Grundlinie des übergeordneten div-tag.

Alles was ich will zu tun ist, haben das Kind Div an der Grundlinie des Übergeordneten Div, hier ist, wie es jetzt aussieht:

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

Hinweis

Habe ich mehrere childDivs mit unterschiedlichen Höhen, und ich brauche Sie alle, um das ausrichten an der baseline/bottom.

Kommentar zu dem Problem

war noch nicht mal denken! ich einfach entfernt die Höhe auf die parentDiv und alle childDiv jetzt sitzen auf der basline. ich bin nur eine dumme sally! Kommentarautor: sia

Aber wenn Sie wollen, dass es bestimmten Höhe - Sie sollten mit absolute Positionierung entsprechend der übergeordneten. Kommentarautor: Y. Shoham

InformationsquelleAutor der Frage sia | 2010-01-06

css html

133

Müssen Sie Folgendes hinzufügen:
```
#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}
```
Beim deklarieren absolute element, es ist entsprechend positioniert, um seinen nächsten Elternteil, der nicht static (es muss absolute, relative oder fixed).

InformationsquelleAutor der Antwort Y. Shoham
9

Sieben Jahre später sucht für die vertikale Ausrichtung immer noch bringen, bis diese Frage, so werde ich nach einer anderen Lösung, die wir zur Verfügung haben, um uns jetzt: flexbox-Positionierung. Setzen Sie einfach display:flex; justify-content: flex-end; flex-direction: column auf das übergeordnete div (gezeigt in diesem fiddle):
```
#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
```
InformationsquelleAutor der Antwort gcbenison

Verwenden Sie die CSS-display-Werte table und table-cell:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

Habe ich einen JSBin demo hier: http://jsbin.com/INOnAkuF/2/edit

Die demo hat auch ein Beispiel, wie man vertikal zentrieren ausrichten, mit der gleichen Technik.

InformationsquelleAutor der Antwort romiem

das funktioniert (ich habe nur getestet in ie & ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

hoffe, das hilft.

InformationsquelleAutor der Antwort pstanton

2

Die Antwort gepostet von Y. Shoham (absolute Positionierung) scheint die einfachste Lösung, in den meisten Fällen, in denen die container eine Feste Höhe, aber wenn der übergeordnete DIV hat zu enthalten mehrere DIVs und auto anpassen, es ist die Höhe, basierend auf dynamischen Inhalt, dann kann es ein problem sein. Ich musste über zwei Blöcke mit dynamischen Inhalten; eine ausgerichtet, um die Oberseite des Behälters und eine an der Unterseite und zwar konnte ich die container, um Sie an die Größe des top-DIV, wenn der DIV-ausgerichtet auf den Boden wurde größer, es würde nicht die Größe der container, sondern verlängern würde außerhalb.
Die Methode, die oben beschrieben durch romiem mit Tisch Stil Positionierung, wenngleich etwas komplizierter, ist robuster in dieser Hinsicht und erlaubt die Ausrichtung an den Boden und die richtige auto-Höhe der container.

CSS
```
#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}
```
HTML
```
<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>
```
Merke ich, dies ist nicht eine neue Antwort, aber ich wollte einen Kommentar auf diesen Ansatz, da Sie dazu führen mich zu finden, meine Lösung, aber als Neuling, ich war nicht erlaubt, zu kommentieren, nur post.

InformationsquelleAutor der Antwort Nick Gillard
1

Würden Sie wahrscheinlich haben, um die child-div zu haben position: absolute.

Aktualisieren Sie Ihr Kind Stil zu
```
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}
```
InformationsquelleAutor der Antwort Ravia
1

Eine alte post, aber dachte, ich würde teilen eine Antwort für jeden der Suche.
Und weil man, wenn man absolute Dinge, die schief gehen können.
Was ich tun würde, ist

HTML
```
<div id="parentDiv"></div>
<div class="childDiv"></div>
```
Css
```
parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}
```
Werden und das würde einfach nur sitzen, die unteren div wieder zurück in das übergeordnete div. sicher für die meisten Browser zu

InformationsquelleAutor der Antwort
0

Ich hatte so etwas ähnliches und habe es zu arbeiten, indem Sie effektiv hinzufügen einiger Polsterung-top für das Kind.

Ich bin mir sicher, dass einige der anderen Antworten hier, würde man die Lösung, aber ich konnte Sie problemlos nach viel Zeit; ich habe stattdessen landete mit dem padding-top-Lösung, die elegant in seiner Einfachheit, scheint aber irgendwie hackish zu mir (nicht zu vergessen die pixel Wert legt, würde vermutlich davon abhängen, die Muttergesellschaft der Höhe).

InformationsquelleAutor der Antwort cellepo
-6

Wenn Sie mit mehreren untergeordneten Div ' s in Ihrem übergeordneten Div ist, dann können Sie die vertical-align-Eigenschaft so etwas wie unten :
```
.Parent div
{
  vertical-align : bottom;
}
```
InformationsquelleAutor der Antwort Pawan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.