html - 如何在另一个div内对齐3个div（左/中/右）？(How to align 3 divs (left/center/right) inside another div?)

Question

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

(我想在容器div中对齐3个div，如下所示：)

[[LEFT]       [CENTER]        [RIGHT]]

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

(容器div的宽度为100％（未设置宽度），调整容器大小后，居中div应该保持居中。)

So I set:

(所以我设置：)

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

But it becomes:

(但它变成：)

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Any tips?

(有小费吗？)

  ask by serg translate from so

Answer 1

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

(使用该CSS，将您的div放置为这样（浮点数优先）：)

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

PS You could also float right, then left, then center.

(PS您也可以向右浮动，然后向左浮动，然后居中。)

The important thing is that the floats come before the "main" center section.

(重要的是浮子位于“主”中心部分之前。)

PPS 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.

(PPS您通常希望在#container内部最后一个代码段： <div style="clear:both;"></div> ，它将垂直扩展#container以包含两个侧面浮标，而不是仅从#center取其高度，并可能允许两侧伸出底部。)