Izquierda, centro y derecha alinean div en la parte inferior de la misma línea

Question

Tengo tres divs que me gustaría mostrar en la misma línea. Cada uno de los tres tiene diferentes anchos y alturas, y no son texto directo. Me gustaría alinear a la izquierda (todo el camino hacia la izquierda), alinear a la derecha otro (todo el camino hacia la derecha), y centrar el tercero (en el medio del div que contiene, toda la página en este caso))

Además, me gustaría que los tres divs se alineen verticalmente en la parte inferior del div que contiene. La solución que tengo verticalmente los alinea a la parte superior del div que contiene.

¿Cuál es la mejor manera de manejar esto?

Answer 1

Al establecer el div contenedor para position:relative y el niño DIVS a position:absolute puede posicionar de forma absoluta los divs dentro de los límites del contenedor.

Esto lo hace fácil, ya que puede usar bottom:0px para alinear todo verticalmente en la parte inferior del contenedor, y luego usar el estilo izquierdo/derecho para colocarlo a lo largo del eje horizontal.

puedo tener un jsFiddle de trabajo: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ y el código de la siguiente manera:

HTML:

<div id="container"> 
    <div id="left">left</div> 
    <div id="center">center</div> 
    <div id="right">right</div>  
</div> 

CSS:

#container { 
    position:relative; 
    height:400px; 
    width:100%; 
    border:thick solid black; 
} 
#container div { 
    background:grey; 
    width:200px; 
} 
#left { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
} 
#center { 
    position:absolute; 
    left:50%; 
    margin-left:-100px; 
    bottom:0px; 
} 
#right { 
    position:absolute; 
    right:0px; 
    bottom:0px; 
} 

Nota: Para el "centro" div, el margen -left = 1/2 del ancho del div :)

Espero que ayude :)

Answer 2

Establecer position: relative en el div que contiene, establezca position: relative en sus 3 divs, y establece el atributo bottom de los 3 divs a 0:

bottom: 0 

Answer 3

Para que su centro div elástica, se podría hacer algo como:

<div style="display:table; width:500px;"> 
    <div style="display:table-row;"> 
    <div style="display:table-cell; width:50px;"></div> 
    <div style="display:table-cell;"></div> 
    <div style="display:table-cell; width:50px;"></div> 
    </div> 
</div> 

Answer 4

Mi técnica es similar a @ Damien-en-SF:

Traté de demostrar rigurosamente todos los requisitos que solicitó para.

Live Demo

HTML:

<div id="container"> 

    <div id="left"></div> 
    <div id="mid"></div> 
    <div id="right"></div> 

</div> 

CSS:

#container { 
    position: relative; 
    height: 400px; 
    width: 80%; 
    min-width: 400px; 
    margin: 0 auto; 

    background: #ccc 
} 
#left, #right, #mid { 
    position: absolute; 
    bottom: 0; 
} 
#left { 
    left: 0; 
    width: 80px; 
    height: 200px; 

    background: red 
} 
#right { 
    right: 0; 
    width: 120px; 
    height: 170px; 

    background: blue 
} 

#mid { 
    left:50%; 

    margin-left: -80px; 
    width: 160px; 
    height: 300px; 

    background: #f39 
} 

Answer 5

Una mejora adicional a la primera respuesta:

En el "centro" div CSS, es necesario agregar:

text-align:center; 

En el "derecho" div CSS, es necesario agregar:

text-align:right; 

... para alcanzar la perfección izquierda/centro/alineado a la derecha.