Richten Sie die DIVs am Boden oder an der Grundlinie aus

94

Ich versuche, ein untergeordnetes div-Tag am unteren Rand oder an der Grundlinie des übergeordneten div-Tags auszurichten.

Alles, was ich tun möchte, ist, das Kind Div an der Basislinie des Eltern-Div zu haben. So sieht es jetzt aus:

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

Ich werde mehrere childDivs mit unterschiedlichen Höhen haben, und ich werde sie alle brauchen, um sich an der Grundlinie / am Boden auszurichten.

html css sia
quelle

dachte nicht einmal nach! Ich habe gerade die Höhe auf dem parentDiv entfernt und alle childDiv sitzen jetzt auf der Basislinie. Ich bin nur ein dummer Sally!

sia

Wenn Sie jedoch eine bestimmte Höhe wünschen, sollten Sie die absolutePositionierung entsprechend dem übergeordneten Element verwenden.

Y.

154

Sie müssen Folgendes hinzufügen:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

Beim Deklarieren absoluteElement ist es positioniert entsprechend seiner nächsten Elternteil , das nicht der Fall ist static(es muss sein absolute, relativeoder fixed).

Y. Shoham
quelle

7

Ich bezweifle, dass dies das tut, was er will. Derzeit werden alle (es sieht so aus, als gäbe es mehrere untergeordnete Elemente, wenn es sich um ein dynamisches Balkendiagramm handelt) übereinander positioniert.

Crmepham

50

Sieben Jahre später wird bei der Suche nach vertikaler Ausrichtung immer noch diese Frage aufgeworfen. Daher werde ich eine weitere Lösung veröffentlichen, die uns jetzt zur Verfügung steht: die Flexbox-Positionierung. Stellen Sie einfach display:flex; justify-content: flex-end; flex-direction: columndas übergeordnete Div ein (auch in dieser Geige gezeigt ):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

gcbenison
quelle

1

Einfach. Genau das, was ich wollte. Verwenden align-items: flex-start;Sie diese Option, wenn Sie die Elemente nicht strecken möchten.

Madhan

Dies ist heutzutage die beste Antwort!

Rens Groenveld

12

Verwenden Sie die CSS-Anzeigewerte von Tabelle und Tabellenzelle:

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;
}

Ich habe hier eine JSBin-Demo erstellt: http://jsbin.com/INOnAkuF/2/edit

Die Demo enthält auch ein Beispiel für die vertikale Ausrichtung mittels derselben Technik.

romiem
quelle

1

Für so viel Scheiße wie Tische, manchmal ist dies die beste Lösung

Sean256

Dies war die beste Lösung für mich

Bowlerae

Dies ist wirklich die beste Lösung, da die Verwendung absolut positionierter Elemente normalerweise die Höhe des übergeordneten Elements

ändert

7

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

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

hoffentlich hilft das.

pstanton
quelle

5

Die Antwort von Y. Shoham (unter Verwendung der absoluten Positionierung) scheint in den meisten Fällen die einfachste Lösung zu sein, wenn der Container eine feste Höhe hat. Wenn der übergeordnete DIV jedoch mehrere DIVs enthalten und seine Höhe basierend auf dem dynamischen Inhalt automatisch anpassen muss, dann Es kann ein Problem geben. Ich brauchte zwei Blöcke mit dynamischem Inhalt. eine auf die Oberseite des Containers und eine auf die Unterseite ausgerichtet, und obwohl ich den Container dazu bringen könnte, sich an die Größe des oberen DIV anzupassen, würde die Größe des Containers nicht die Größe des Containers ändern, sondern sich nach außen erstrecken . Die oben von romiem beschriebene Methode unter Verwendung der Positionierung im Tabellenstil ist zwar etwas komplizierter, in dieser Hinsicht jedoch robuster und ermöglicht die Ausrichtung nach unten und die korrekte automatische Höhe des Containers.

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>

Mir ist klar, dass dies keine neue Antwort ist, aber ich wollte diesen Ansatz kommentieren, da er mich dazu brachte, meine Lösung zu finden, aber als Neuling durfte ich nicht kommentieren, sondern nur posten.

Nick Gillard
quelle

3

Sie müssten wahrscheinlich das Kind div einstellen, um zu haben position: absolute.

Aktualisieren Sie Ihren untergeordneten Stil auf

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

Ravia
quelle

Ich habe das versucht, aber was ich brauche, ist der untere Teil des childDiv, um am unteren Rand des parentDiv zu sitzen. Das Diagramm soll dynamisch sein und die Höhen variieren von jedem childDiv zum nächsten. Die Positionierung könnte funktionieren, aber ich habe es nicht aufhören, etwas herauszufinden, das solide ist ...

sia

5

Keine

2

Ein alter Beitrag, aber ich dachte, ich würde eine Antwort für jeden teilen, der sucht. Und weil bei der Verwendung etwas absoluteschief gehen kann. Was ich tun würde, ist

HTML

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

Die Css

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

Und das würde einfach das untere Div wieder in das übergeordnete Div setzen. sicher auch für die meisten Browser

quelle

Dies würde die childDiv zur Hälfte am unteren Rand der parentDiv machen. Sie müssen mindestens -40px am oberen Rand verwenden. Es ist auch die beste Vorgehensweise, Position zu verwenden: relativ; in diesem Fall für beide Divs.

Augus

1

Ich hatte etwas Ähnliches und brachte es zum Laufen, indem ich dem Kind effektiv etwas Polsterung hinzufügte .

Ich bin sicher, dass einige der anderen Antworten hier zur Lösung führen würden, aber ich konnte sie nicht dazu bringen, nach langer Zeit einfach zu arbeiten. Stattdessen habe ich die Padding-Top-Lösung gefunden, die in ihrer Einfachheit elegant ist, mir aber irgendwie hackig erscheint (ganz zu schweigen davon, dass der eingestellte Pixelwert wahrscheinlich von der Höhe der Eltern abhängt).

cellepo
quelle

0

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

Erweitern Sie das Snippet

Das ist meine Lösung

NEM
quelle

-6

Wenn Sie mehrere untergeordnete Divs in Ihrem übergeordneten Div haben, können Sie die vertikal ausgerichtete Eigenschaft wie folgt verwenden:

.Parent div
{
  vertical-align : bottom;
}

Pawan
quelle

Warum so viele Stimmen dafür ohne Kommentare? Löst es das Problem nicht? Online-Forschung schlägt vor, dass es sollte.

Sholsapp

Richten Sie die DIVs am Boden oder an der Grundlinie aus

Antworten: