ti-enxame.com

CSS alinhar três divs horizontalmente

Estou tendo um problema ao alinhar três divs dentro de uma div pai, o efeito que preciso é o seguinte

|IMAGE| +TEXT+ |IMAGE|

Cada div contém uma imagem (2) e o texto (1), respectivamente. Alinhando-os é fácil, o problema é que eu quero que a div CENTER tenha largura automática para o tamanho da janela do navegador e mantenha as outras divs IMAGE sempre no lado direito e esquerdo, respectivamente.

Algo assim, por exemplo, se o usuário maximizar a janela:

|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|

Como você pode ver, a ideia é que o centro div cresça, e amplie automaticamente, mas mantendo a estrutura.

Como eu consegui esse comportamento? Desde já, obrigado.

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

Se isso ainda não se comportar como você deseja, forneça requisitos mais detalhados.

41
Bobby Jack

Aqui está outra implementação em linha para três imagens 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>
5
Ian