CSS将三个div水平对齐

Question

我遇到了一个问题，就是如何将三个 div 对齐在一个父级 div 内，我想要的效果如下图所示：

|IMAGE| +TEXT+ |IMAGE|

每个 div 分别包含一个图像（2）和文本（1）。对齐它们很容易，问题在于我想让 CENTER div 自动宽度适应浏览器窗口大小，并始终将其他 IMAGE div 分别放置于右侧和左侧。

例如，如果用户最大化窗口，则如下所示：

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

正如你所看到的，这个想法是让中心的div扩展并自动调整宽度但保持结构。

我该如何实现这种行为？谢谢您的帮助。

- lidermin

Answer 1

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

如果这仍然不能达到您想要的效果，请提供更详细的要求。

- Bobby Jack

---

这正是我正在寻找的。我错过了div-2显示内联部分。谢谢。 - lidermin

提醒一下，如果你的 DIV 元素没有内容而只是用来承载背景图片，你可能需要使用 display: inline-block; 而不是 display: inline;。我知道这与所提问的问题无关，但这是一个容易让很多人困惑的问题。 - Dave Sag

Answer 2

这里是另一种三张图片并排的内联实现：

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

- Ian

---

看起来这好像是完全相同的实现，只是将样式内联了。 - Jack

Answer 3

这也很好用。

.container{width: 100%; padding: 5px;}
.fig-left {float: left;}
.text     {float: left;}
.fig-right{float: right;}

/* add margins maybe */
.text, .fig-right, p{margin: .75em;}

和 HTML https://codepen.io/tradesouthwest/pen/MWELwGN 进行测试

<div class="container">
  <div class="fig-left">
    <img src="https://picsum.photos/id/1055/200/300"/>
  </div>
  <div class="text">
    <p>ABCDEFGHIJKLMNOP don't forget the alt in images QRSTUVWXYZ</p>    
  </div>
  <div class="fig-right">
    <img src="https://picsum.photos/id/1055/200/300"/>
  </div>
</div>

- tradesouthwest