如何排列3的div（左/中/右）在另一个分区？ [英] How to align 3 divs (left/center/right) inside another div?

问题描述

我想有3 div的容器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;}

不过，就变成了：

But it becomes:

[[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>

PS 的你也可以浮动权，然后离开，然后中心。重要的是，花车来了主中心部分之前。

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 最后希望这个片断：＆LT; D​​IV的风格=明确：既; ＆GT;＆LT; / DIV＆GT; 这将延长的#container 垂直含有两侧浮动，而不是仅仅从<$ C $服用它的高度C> #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.

这篇关于如何排列3的div（左/中/右）在另一个分区？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！