Wie richtet man drei Divs (links/Mitte/rechts) in einem Div aus?

Question

Ich möchte 3 Divs innerhalb eines Container-Divs ausrichten, etwa so:

[[LINKS] [MITTE] [RECHTS]]

Die Breite des Container-Divs beträgt 100 % (es ist keine Breite festgelegt) und das mittlere Div sollte nach der Größenänderung des Containers in der mittleren Position bleiben.

Also habe ich Folgendes eingestellt:

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

Aber das Ergebnis war:

[[LINKS] [MITTE] ]
                              [RECHTS]

Irgendwelche Vorschläge?

Answer 1

使用Flexbox水平对齐三个div

这是一种在另一个div中水平对齐div的CSS3方法。

#container {
  display: flex;                  /* 建立flex容器 */
  flex-direction: row;            /* 默认值；可以省略 */
  flex-wrap: nowrap;              /* 默认值；可以省略 */
  justify-content: space-between; /* 从默认值（flex-start）切换 */
  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

---

flexbox的好处：

1. 代码量少，非常高效
2. 垂直和水平居中非常简单
3. 等高列非常简单
4. 多种选项用于对齐flex元素
5. 响应式
6. 与浮动和表格不同，浮动和表格的布局能力有限，因为它们从未用于构建布局， flexbox是一种具有广泛选项的现代（CSS3）技术。

---

了解更多关于flexbox的信息：

• 对齐Flex项的方法
• 使用CSS弹性盒 ~ MDN
• Flexbox完全指南 ~ CSS-Tricks
• Flexbox是什么？！ ~ YouTube视频教程

---

浏览器支持： Flexbox受到所有主要浏览器的支持，除了IE < 10。一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。更多详细信息请参见这个答案。

Answer 2

使用这个CSS，将你的div放置如下（首先是浮动）：

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

附注：你也可以先浮动右边，然后左边，再居中。重要的是浮动的内容要在“主要”中心部分之前。

附注：通常你会想在#container中的最后加入这段代码：<div style="clear:both;"></div>，它会使#container的高度垂直延伸，以容纳两侧的浮动内容，而不仅仅是从#center的高度来定位，这样可以避免两侧内容溢出底部。