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. 你也可以向右浮动，然后向左浮动，然后居中。重要的是 float 出现在“主要”中心部分之前。

P.P.S. 你经常希望在 #container 中排在最后。这个片段:<div style="clear:both;"></div>这将延长 #container垂直包含两侧 float ，而不是仅从 #center 获取高度并且可能允许侧面突出底部。