Wie platziere ich ein div am unteren Rand eines anderen div?

Question

Wie platziere ich das adInfoBox1 am unteren Rand des Containers?

Schau dir das hier an: http://jsfiddle.net/snowman/hxXJh/

Bitte beachte, dass der Container keine feste Höhe haben wird.

Answer 1

Sie können position: absolute verwenden.

.container
{
    height: 400px;
    position: relative;
}

.adInfoBox1 {
  padding: 5px 5px 5px 10px;
  position: absolute;
  bottom: 0px;
  width: 457px;
  background-color: green;
}

.adRegularList .categoryList {
  bottom: 0;
  height: 16px;
  position: absolute;
}

Sehen Sie sich hier ein Beispiel an: http://jsfiddle.net/hxXJh/5/

Answer 2

Ich würde vorschlagen:

.adInfoBox1 {
    padding: 5px 5px 5px 10px;
    position: absolute;
    bottom: 0; /* befestigt das Element am unteren Rand */
    left: 0; /* befestigt das Element am linken Rand */
    right: 0; /* befestigt das Element am rechten Rand */
    background-color : grün;
}

Das obige wird dem .adInfoBox implizit eine Breite von 100% geben. Dies kann durch Entfernen oder Ändern der right oder left Angaben angepasst werden. Ich habe das float entfernt, weil das Verwenden von position: absolute; das Element sowieso aus dem Dokumentenfluss nimmt.

JS Fiddle Demo.

Answer 3

Einfache trickreiche Lösung. Div2 wird am unteren Rand von containerDiv sein.

   Inhalt hier...

Answer 4

Ändern Sie das CSS von adInfoBox1 zu:

.adInfoBox1 {
  float: left;
  padding: 5px 5px 5px 10px;
  position: absolute;
  width: 457px;
  background-color : grün;
  bottom: 0;
}