如何在另一个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放置为这样（浮点数优先）：

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

PS 您也可以向右浮动，然后向左浮动，然后居中。重要的是浮子位于“主”中心部分之前。

PPS 您通常希望在#container此代码片段的最后：该代码片段<div style="clear:both;"></div>将#container垂直延伸以包含两个侧面浮标，而不是仅从#center其底部开始占据高度，并可能使侧面从底部突出。