CSS alinear tres divs horizontal

Estoy teniendo un problema alineando tres divs dentro de un div padre, el efecto que necesito es la siguienteCSS alinear tres divs horizontal

|IMAGE| +TEXT+ |IMAGE|

Cada div contiene una imagen (2) y el texto (1) respectivamente. Alinearlos es fácil, el problema es que quiero que el div CENTER tenga el ancho automático del tamaño de la ventana de los navegadores y que los demás divs de IMAGE estén siempre en el lado derecho e izquierdo, respectivamente.

Algo así por ejemplo, si el usuario maximiza la ventana:

Como se puede ver, la idea es que el div centro crece, y la anchura de automóviles, pero manteniendo la estructura.

¿Cómo podría obtener ese comportamiento? Gracias por adelantado.

Fuente

2010-09-02 lidermin

#container { text-align: center; } 
#div-1 { float: left; } 
#div-2 { display: inline; } 
#div-3 { float: right; }

Si aún así no se comporta como usted desea, proporcione requisitos más detallados.

Fuente

2010-09-02 15:31:49

eso es justo lo que estaba buscando. Me perdí la parte en línea de la pantalla div-2. Gracias. – lidermin

Sólo un FYI, es posible que desee utilizar 'display: inline-block;' en lugar de 'display: inline;' si sus DIV están vacíos de contenido y usted los está usando para guardar imágenes de fondo. Me doy cuenta de que este no es el caso para la pregunta que se hace, pero es algo que arroja mucha gente. –

Aquí es otra aplicación en línea para los tres imágenes lado a lado:

<div style="text-align:center"> 

    <div style="float: left"><img src="image1.png"/></div> 

    <div style="display: inline"><img src="image2.png"/></div> 

    <div style="float: right"><img src="image3.png"/></div> 

</div>

Fuente

2012-07-30 14:50:45 Ian

+16

Parece ser exactamente la misma implementación solo con los estilos en línea. – Jack

Respuesta

Cuestiones relacionadas