CSS水平对齐三个div

CSS水平对齐三个div,css,Css,我在一个父div中对齐三个div时遇到了一个问题,我需要的效果如下 |IMAGE| +TEXT+ |IMAGE| 每个div分别包含图像(2)和文本(1)。对齐它们很容易,问题是我想让中间的div自动宽度到浏览器窗口的大小,并使其他图像div始终分别位于右侧和左侧 例如,如果用户将窗口最大化: |IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE| 如您所见,其想法是中心div增长,并自动调整宽度,但保持结构不变 我怎么

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

|IMAGE| +TEXT+ |IMAGE|
每个div分别包含图像(2)和文本(1)。对齐它们很容易,问题是我想让中间的div自动宽度到浏览器窗口的大小,并使其他图像div始终分别位于右侧和左侧

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

|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|
如您所见,其想法是中心div增长,并自动调整宽度,但保持结构不变

我怎么会有这种行为?提前谢谢

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

如果这仍然不符合您的要求,请给出更详细的要求。

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

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


这正是我想要的。我错过了div-2显示内联部分。谢谢。仅供参考,您可能需要使用
display:inline块而不是
显示:内联如果您的div中没有内容,而您只是使用它们来保存背景图像。我意识到这个问题不是这样的,但它会让很多人感到困惑。对我来说不起作用。它似乎是完全相同的实现,只是内嵌了样式。