Alinear DIV al fondo o la línea de base

Question 1

Estoy tratando de alinear una etiqueta div secundaria con la parte inferior o la línea de base de la etiqueta div principal.

Todo lo que quiero hacer es tener el Div hijo en la línea de base del Div padre, así es como se ve ahora:

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

Nota

Tendré múltiples childDivs con diferentes alturas, y las necesitaré todas para alinearse con la línea de base / parte inferior.

Question 2

Necesitas agregar esto:

#parentDiv {
  position: relative;
}

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

Al declarar el absoluteelemento, se posiciona de acuerdo con su padre más cercano que no lo es static(debe ser absolute, relativeo fixed).

Question 3

Siete años después, las búsquedas de alineación vertical todavía plantean esta pregunta, por lo que publicaré otra solución que tenemos disponible ahora: posicionamiento flexbox. Simplemente configure display:flex; justify-content: flex-end; flex-direction: columnel div padre (demostrado en este violín también):

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

Question 4

Utilice los valores de visualización CSS de la tabla y la celda de la tabla:

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

He creado una demostración de JSBin aquí: http://jsbin.com/INOnAkuF/2/edit

La demostración también tiene un ejemplo de cómo alinear en el centro verticalmente usando la misma técnica.

Question 5

esto funciona (solo probé 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>

Espero que ayude.

Question 6

La respuesta publicada por Y. Shoham (usando posicionamiento absoluto) parece ser la solución más simple en la mayoría de los casos donde el contenedor tiene una altura fija, pero si el DIV principal tiene que contener varios DIV y ajustar automáticamente su altura en función del contenido dinámico, entonces puede haber un problema. Necesitaba tener dos bloques de contenido dinámico; uno alineado con la parte superior del contenedor y otro con la parte inferior y aunque pude hacer que el contenedor se ajustara al tamaño del DIV superior, si el DIV alineado con la parte inferior fuera más alto, no cambiaría el tamaño del contenedor sino que se extendería hacia afuera . El método descrito anteriormente por romiem que usa el posicionamiento estilo tabla, aunque un poco más complicado, es más robusto a este respecto y permite la alineación al fondo y la altura automática correcta del contenedor.

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>

Me doy cuenta de que esta no es una respuesta nueva, pero quería comentar sobre este enfoque, ya que me llevó a encontrar mi solución, pero como novato no se me permitió comentar, solo publicar.

Question 7

Probablemente tendría que configurar el div secundario para tener position: absolute.

Actualice el estilo de su hijo a

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

Question 8

Una publicación antigua, pero pensé en compartir una respuesta para cualquiera que busque. Y porque cuando lo usas las absolutecosas pueden salir mal. Lo que yo haría es

HTML

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

El CSS

parentDiv{

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

Y eso simplemente colocaría ese div inferior de nuevo en el div principal. seguro para la mayoría de los navegadores también

Question 9

Tuve algo similar y lo hice funcionar agregando efectivamente algo de relleno al niño.

Estoy seguro de que algunas de las otras respuestas aquí llegarían a la solución, pero no pude hacer que funcionen fácilmente después de mucho tiempo; En cambio, terminé con la solución acolchada que es elegante en su simplicidad, pero me parece un poco hackea (sin mencionar que el valor de píxel que establece probablemente dependería de la altura del padre).

Question 10

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>

Expandir fragmento

Esta es mi solucion

Question 11

Si tiene múltiples Div hijos dentro de su Div padre, entonces puede usar la propiedad de alineación vertical algo como a continuación:

.Parent div
{
  vertical-align : bottom;
}