如何在另一个 div 内对齐 3 个 div(左/中/右)? [英] How to align 3 divs (left/center/right) inside another div?

问题描述

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

[[左] [中心] [右]]

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

所以我设置:

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

但它变成了:

[[LEFT] [CENTER] ][对]

有什么建议吗?

解决方案

使用该 CSS，将您的 div 像这样放置(浮动优先):

<div id="左"></div><div id="right"></div><div id="center"></div>

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

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

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

[[LEFT]       [CENTER]        [RIGHT]]

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

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?

解决方案

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. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

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.

这篇关于如何在另一个 div 内对齐 3 个 div(左/中/右)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！