如何在一個div中對齊三個div（左/中/右）？

Question

我想在一個容器div內部對齊3個div，就像這樣：

[[LEFT] [CENTER] [RIGHT]]

容器div的寬度是100%（沒有設定寬度），並且在調整容器大小後，中間的div應該保持在中間位置。

所以我設定了：

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

但結果變成了：

[[LEFT] [CENTER] ]
                              [RIGHT]

有什麼建議嗎？

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的高度來定位，這樣可以避免兩側內容溢出底部。