CSS CSS水平对齐三个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3628515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS align three divs horizontally
提问by lidermin
I'm having an issue aligning three divs inside a parent div, the effect I need is the following
我在对齐父 div 内的三个 div 时遇到问题，我需要的效果如下
|IMAGE| +TEXT+ |IMAGE|
Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.
每个 div 分别包含一个图像 (2) 和文本 (1)。对齐它们很容易，问题是我希望 CENTER div 自动宽度为浏览器窗口的大小，并使其他 IMAGE div 始终分别位于右侧和左侧。
Something like this for example, if the user maximizes the window:
例如这样的事情，如果用户最大化窗口：
|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|
As you can see, the idea is that the center div grows, and auto width but keeping the structure.
正如你所看到的，这个想法是中心 div 增长，自动宽度但保持结构。
How could I get that behaviour? Thanks in advance.
我怎么能得到这种行为？提前致谢。
回答by Bobby Hyman
#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }
If that still doesn't behave how you want, please give more detailed requirements.
如果这仍然不符合您的要求，请提供更详细的要求。
回答by Ian
Here is another inline implementation for three images side by side:
这是并排三个图像的另一个内联实现：
<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>
