在一个 div 中平均分配 3 个 div - 没有浮动答案

【问题标题】：Equally distribute 3 divs within a div - without float在一个 div 中平均分配 3 个 div - 没有浮动
【发布时间】：2016-05-24 23:51:05
【问题描述】：

我一直在广泛阅读有关此问题的信息，但未能让我满意地解决它。

我有一个 div (<section>)，其中包含一个 <p> 和 3 个 <div>s。我想将 3 个 div 平均分布在一行中，以便第一个 div 的左边框位于文档的左边框（<body>），第三个 div 的右边框位于文档的右边框.

我不想使用浮动，因为背景颜色会消失。

我尝试了 flex，但 justify-content 没有产生预期的结果。

这是JSBIN上的代码。

谢谢！

【问题讨论】：

包装 div 并弯曲包装器。
How to align 3 divs (left/center/right) inside another div?的可能重复
谢谢 Michael_B，我的帖子有一个指向 stackoverflow.com/questions/2603700/… 的链接，它解释了如何做到这一点以及为什么 flex 是最有效的解决方案。
@johann_ka，不客气。你引用的那篇文章是我对这个问题的回答;-)

标签： css alignment centering

【解决方案1】：

您可以在容器上使用display: flex，并将三个 div 元素的宽度设置为占其容器的三分之一（或尽可能接近）。容器必须具有设定的宽度（像素或百分比）才能正常工作。

#container {
  display: flex;
  height: 600px;
  width: 600px;
  background-color: lightgreen;
}
#container div {
  border: 1px solid black;
  margin: 0 10px;
  width: 33.333333%;
}
#container div img {
  width: 100%;
}

<div id="container">
  <div id="content1">
    I'm some content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/P8z2H80.jpg">
  </div>
  <div id="content2">
    I'm some more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/NfnBZAI.jpg">
  </div>
  <div id="content3">
    I'm even more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/W8M37N2.jpg">
  </div>
</div>

【讨论】：