Alinear DIV al final o línea base

Estoy tratando de alinear una etiqueta div infantil en la parte inferior o en la línea base de la etiqueta div principal.Alinear DIV al final o línea base

Todo lo que quiero hacer es tener el niño Div en la línea de base del Padre Div, aquí es lo que parece 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 childDiv s con diferentes alturas, y las necesitaré todas para alinearlas con la línea base/abajo.

Fuente

2010-01-06 sia

no era ni siquiera pensar! Acabo de eliminar la altura en parentDiv y todos los childDiv ahora se sientan en la línea de fondo. soy solo una tonta sally! – sia

Pero si desea que tenga una altura específica, debe usar el posicionamiento 'absoluto' de acuerdo con el elemento principal. –

Probablemente tendrías que configurar el div hijo para tener position: absolute.

actualización de su estilo de niño a

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

Fuente

2010-01-06 17:55:23 Ravia

intenté eso, pero lo que necesito es la parte inferior del childDiv para sentarme en la parte inferior del parentDiv, el gráfico debe ser dinámico, y las alturas variarán de cada elemento infantil a la siguiente ... el posicionamiento podría funcionar, pero no han dejado de encontrar algo sólido ... – sia

He intentado esto y está trabajando para mí – Ravia

no es una buena idea establecer top a 207 (algún número arbitrario) mejor para establecer fondo: 0 – pstanton

129

Es necesario añadir lo siguiente:

#parentDiv { 
    position: relative; 
} 

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

Al declarar absolute elemento, se coloca de acuerdo a su padre más cercano que no es static (que debe ser absolute, relative o fixed).

Fuente

2010-01-06 17:59:51

Dudo que esto haga lo que quiere, actualmente esto posicionará a todos (parece como si hubiera serán múltiples elementos secundarios si es un gráfico de barras dinámico) uno encima del otro. – crm

esto funciona (sólo probé es decir & ss):

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

Fuente

2010-01-06 18:05:31 pstanton

-6

si va a ser niño múltiples Div del interior de su padre Div, a continuación, puede utilizar la propiedad algo vertical-align, como a continuación:

.Parent div 
{ 
    vertical-align : bottom; 
}

Fuente

2011-12-16 07:46:05 Pawan

¿Por qué tantos votos a la baja para esto sin comentarios? ¿No soluciona el problema? La investigación en línea sugiere que debería. – sholsapp

la alineación vertical funciona solo en los elementos de la tabla – Alex

un puesto de edad, pero pensé que podría compartir una respuesta para todos aquellos que buscan. Y porque cuando usa absolute, las cosas 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 sólo se sentaba ese fondo div copia de seguridad en el div padre.seguro para la mayoría de los navegadores también

Fuente

2013-03-15 09:14:58

Esto haría que la mitad del elemento childDiv esté en la parte inferior del elemento parentDiv. Necesita al menos usar -40px en el margen superior. También es la mejor práctica usar la posición: relativa; en este caso para ambos divs. – Augus

Utilice la pantalla CSS valores de mesa y mesa de células:

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 el centro verticalmente con la misma técnica.

Fuente

2013-11-29 12:17:11 romiem

Por tanta mierda que reciben las tablas, a veces esta es la mejor solución – Sean256

esta fue la mejor solución para mí – bowlerae

Esta es realmente la mejor solución, ya que el uso de elementos absolutamente posicionados generalmente cambia la altura del elemento principal – hamncheez

Tuve algo similar y lo hice funcionar de manera efectiva añadiendo un poco 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 funcionaran fácilmente después de un montón de tiempo; En cambio, terminé con la solución de relleno, que es elegante en su simplicidad, pero me parece un poco hackosa (sin mencionar que el valor de píxel que establece probablemente dependa de la altura de los padres).

Fuente

2014-10-24 01:35:52 cellepo

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 es una altura fija, pero si el DIV padre debe contener múltiples DIV y ajustar automáticamente su altura en función contenido dinámico, entonces puede haber un problema. Necesitaba tener dos bloques de contenido dinámico; uno alineado a la parte superior del contenedor y otro al fondo y aunque podía hacer que el contenedor se ajustara al tamaño del DIV superior, si el DIV alineado con el inferior era más alto, no cambiaría el tamaño del contenedor sino que se extendería afuera . El método descrito anteriormente por romiem usando el posicionamiento de estilo de tabla, aunque es 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>

Sé que esto no es una nueva respuesta, pero quería comentar sobre este enfoque, ya que me llevó a encontrar mi solución, pero como novato, no pude comentar, solo publicar.

Fuente

2015-10-06 11:53:36

Siete años después, las búsquedas de alineación vertical aún hacen surgir esta pregunta, así que publicaré otra solución que tenemos disponible ahora: posicionamiento de flexbox. Sólo hay que establecer display:flex; justify-content: flex-end; flex-direction: column en el div padre (demostrado en este fiddle también):

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

Fuente

2017-08-26 18:33:28 gcbenison

Simple. Exactamente lo que quería. Use 'align-items: flex-start;' si no desea estirar los elementos. – Madhan

Alinear DIV al final o línea base

Respuesta

Cuestiones relacionadas