wake-up-neo.com

Positionieren Sie div am Ende eines anderen div, ohne Absolut zu verwenden

Ich habe ein Div in einem anderen Div. Das innere Div hat Ränder von 0, automatisch, um es zu zentralisieren. Ich kann es jedoch nicht dazu bringen, nach unten zu schweben, ohne es absolut zu machen. Gibt es überhaupt einen relativen div-Float am unteren Rand eines normalen div? 

htmlcssimagecss-floatrelative
12
user3506938

Ohne position: absolute müssten Sie es vertikal ausrichten.

Sie können vertical-align: bottom verwenden, der laut den docs :

Die CSS-Eigenschaft für vertikales Ausrichten gibt die vertikale Ausrichtung eines Inline- oder Tabellenzellenfelds an.

Setzen Sie also entweder das äußere div als Inline-Element oder als table-cell:

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: bottom;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>

14
LcSalazar

Heutzutage können Sie einfach display: flex für all diese Ausrichtungsprobleme verwenden. 

In Ihrem Fall können Sie das übergeordnete Element einfach zu einer Flex-Flex-Richtung column (die Standardeinstellung ist row) und justify-content: flex-end machen. Der Vorteil dieses Ansatzes ist, dass er auch funktioniert, wenn sich mehrere Elemente im übergeordneten Element befinden.

Wenn Sie mehrere haben und alle vom Anfang des übergeordneten Elements bis zum Ende ausrichten möchten, können Sie justify-content in eine andere Eigenschaft wie space-between oder space-evenly ändern.

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>

4
Obed Marquez Parlapiano

Fügen Sie dieses Styling dem inneren Div hinzu.

position: relative;
top: 100%;
transform: translateY(-100%);
1
wizzfizz94

Die einzige Möglichkeit, die ich fand, wenn Ihr Inhalt keine statische Höhe ist, bestand darin, Jquery wie folgt zu verwenden:

$(document).ready(function(){
  inner_height = $('#inner-div').height();
  outer_height = $('#outer-div').height();
  margin_calc = (outer_height - inner_height)
  $('#inner-div').css('margin-top', (margin_calc+'px'));
});

Dies funktioniert für ein Spalten-Div innerhalb eines enthaltenden Div, wenn die Höhe einer anderen Spalte größer ist. 

Es ist unglaublich, dass diese einfache Sache nicht über eine css-Eigenschaft (d. H. "Float: bottom") "eingebaut" wird.

0
JosephK