如何在另一个 div 中对齐 3 个 div(左/中/右)?

2022-01-30 00:00:00 alignment html css css-float

我想在一个容器 div 中对齐 3 个 div，如下所示:

I want to have 3 divs aligned inside a container div, something like this:

[[LEFT]       [CENTER]        [RIGHT]]

容器 div 为 100% 宽(未设置宽度)，调整容器大小后，中心 div 应保持在中心.

Container div is 100% wide (no set width), and center div should remain in center after resizing the container.

所以我设置:

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

但它变成了:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

有什么建议吗?

推荐答案

使用那个 CSS，把你的 div 像这样(浮动优先):

With that CSS, put your divs like so (floats first):

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

P.S. 你也可以向右浮动，然后向左浮动，然后居中.重要的是浮动出现在主要"中心部分之前.

P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

PPS 你经常希望在 #container 这个片段中放在最后:<div style="clear:both;"></div> 将垂直扩展 #container 以包含两侧浮动，而不是仅从 #center 获取其高度并可能允许两侧突出底部.

P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.

相关文章