CSS水平对齐三个div

时间:2010-09-02 15:14:14

标签: css

我在父div中对齐三个div时遇到问题,我需要的效果如下

|IMAGE| +TEXT+ |IMAGE|

每个div分别包含Image(2)和text(1)。对齐它们很容易,问题是我希望CENTER div的自动宽度达到浏览器窗口的大小,并保持其他IMAGE div始终分别位于右侧和左侧。

例如,如果用户最大化窗口,

就是这样的东西:

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

正如你所看到的,这个想法是中心div增长,自动宽度但保持结构。

我怎么能得到这种行为?提前谢谢。

2 个答案:

答案 0 :(得分:40)

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

如果仍然没有按照您的意愿行事,请提供更详细的要求。

答案 1 :(得分:5)

这是三个并排的三个图像的另一个内联实现:

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