如何在另一个 div 中对齐 3 个 div（左/中/右）？

Question

我想在容器 div 中对齐 3 个 div，如下所示：

 [[LEFT]       [CENTER]        [RIGHT]]

容器 div 为 100% 宽（未设置宽度），调整容器大小后中心 div 应保持在中心。

所以我设置：

 #container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

但它变成了：

 [[LEFT]       [CENTER]              ]
                              [RIGHT]

有小费吗？

原文由 serg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用该 CSS，像这样放置您的 div（首先浮动）：

 <div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS 你也可以向右浮动，然后向左浮动，然后居中。重要的是花车出现在“主要”中心部分之前。

PPS You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center 并且可能允许侧面突出底部。

原文由 dkamins 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 Flexbox 水平对齐三个 Div

这是一个 CSS3 方法，用于在另一个 div 内水平对齐 div。

 #container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

 <div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

justify-content 属性有五个值：

• flex-start （默认）
• flex-end
• center
• space-between
• space-around

在所有情况下，三个 div 都在同一行上。有关每个值的说明，请参阅： https ://stackoverflow.com/a/33856609/3597276

---

弹性盒子的好处：

1. 最少的代码；很有效率
2. 垂直和水平居中简单易行
3. 等高柱简单易行
4. 对齐弹性元素的多个选项
5. 它反应灵敏
6. 与浮动和表格不同，它们提供有限的布局能力，因为它们从未用于建筑布局，而 flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

---

要了解有关 flexbox 的更多信息，请访问：

• 对齐 Flex 项目的方法
• 使用 CSS 弹性盒子 ~ MDN
• Flexbox 完整指南 ~ CSS 技巧
• 什么是 Flexbox？ ~ YouTube 视频教程

---

浏览器支持： _所有主流浏览器都支持 Flexbox， IE < 10 除外。一些最近的浏览器版本，例如 Safari 8 和 IE10，需要 供应商前缀。要快速添加前缀，请使用 Autoprefixer 。 此答案 中的更多详细信息。_

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议