css - posicion - Izquierda, centro y derecha alinean divs en la parte inferior de la misma línea

posicion fija css

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 recto. Me gustaría alinear a la izquierda uno (todo el camino a la izquierda), alinear a la derecha otro (todo el camino a la derecha), y centrar el tercero (en el centro del div contenido, toda la página en este caso ).

Además, me gustaría que los tres divs estén alineados verticalmente con la parte inferior del div que contiene. La solución que tengo los alinea verticalmente a la parte superior del div que contiene.

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

Answer 1

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

bottom: 0

Answer 2

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

Intenté demostrar rigurosamente todos los requisitos que pediste.

Demo en vivo

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 3

Para hacer tu centro div elástico, podrías 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

Una mejora adicional a la primera respuesta:

En el "centro" div CSS, necesita agregar:

text-align:center;

En la div "derecha" CSS, necesita agregar:

text-align:right;

... para lograr perfectamente la alineación izquierda / centro / derecha.

Answer 5

Al establecer su div contenedor en position:relative y los divs secundarios en 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 con la parte inferior del contenedor, y luego usar el estilo de izquierda / derecha para posicionarse a lo largo del eje horizontal.

Configuré un jsFiddle que funciona: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ y el código siguiente:

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 div "centro", el margen-izquierdo = 1/2 el ancho del div :)

Espero que ayude :)