html - 如何在另一个 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]

有什么建议吗？

Answer 1

使用该 CSS，像这样放置您的 div(首先 float ):

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

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

P.P.S. 你经常想要 last in #container这个片段:<div style="clear:both;"></div>这将扩展 #container垂直包含两侧 float 而不是仅从 #center 获取其高度并可能允许侧面突出底部。