如何alignment另一个div内的3个div（左/中/右）？
我想有一个容器div里面alignment3个div，像这样：
[[LEFT] [CENTER] [RIGHT]] 集装箱格是100％宽（没有设置宽度），并且在调整集装箱大小后，中心格应该保持居中。
所以我设定了：
#container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;}
但它变成：
[[LEFT] [CENTER] ] [RIGHT]
任何提示？
用这个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取高度，两侧伸出底部。
如果你不想改变你的HTML结构，你也可以通过添加text-align: center; 包装元素和display: inline-block; 到居中的元素。
#container { width:100%; text-align:center; } #left { float:left; width:100px; } #center { display: inline-block; margin:0 auto; width:100px; } #right { float:right; width:100px; }
现场演示： http : //jsfiddle.net/CH9K8/
使用Flexbox水平alignment三个div
这是一个CSS3方法，用于在另一个div内水平alignmentdiv。
#container { display: flex; /* establish flex container */ flex-direction: row; /* default value; can be omitted */ flex-wrap: nowrap; /* default value; can be omitted */ justify-content: space-between; /* switched from default (flex-start, see below) */ background-color: lightyellow; } #container > div { width: 100px; height: 100px; border: 2px dashed red; }
<div id="container"> <div></div> <div></div> <div></div> </div>
浮动属性实际上不用于alignment文本。
该属性用于将元素添加到右侧或左侧或中心。
这意味着如果你将float设置为left，那么所有的分区都将被添加到左边。
<code> <div> <div style="float:left">First</div> <div style="float:left">Second</div> <div style="float:left">Third</div> </div> </code>
那么输出将是
[第一第二第三]
反之亦然，如果你设置属性浮动权所有，那么它会插入所有你的股权
[第三] [秒] [第一]
这意味着float => left属性会将您的下一个元素添加到前一个元素的左侧，右侧是相同的大小写
你也必须考虑父元素的宽度
如果子元素的宽度之和超过了父元素的宽度，则下一行将添加下一个元素
<code> <div style="width:100%"> <div style="float:left;width:50%">First</div> <div style="float:left;width:50%">Second</div> <div style="float:left;width:50%">Third</div> </div> </code>
[第一秒]
[第三]
所以你需要考虑所有这些方面，以获得完美的结果
我喜欢我的酒吧紧身而有活力。 这是为CSS 3和HTML 5
-
首先，将Width设置为100px是有限制的。 不要这样做。
-
其次，将容器的宽度设置为100％可以正常工作，直到整个应用程序的页眉/页脚栏为止，例如导航或信用/版权栏。 使用
right: 0;而不是那种情况。 -
你正在使用id（hash
#container#left，#container#left等）而不是类（.container，.left等），这很好，除非你想在你的代码中重复你的风格模式。 我会考虑使用类。 -
对于HTML，无需交换左侧，中间和右侧的订单。
display: inline-block;修复了这个问题，将代码返回到更干净的逻辑上。 -
最后，你需要清除所有的浮动，以免它将来也不会混乱。 你
clear: both;做到这clear: both;
总结：
HTML：
<div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> <div class="clear"></div> </div>
CSS：
.container {right: 0; text-align: center;} .container .left, .container .center, .container .right { display: inline-block; } .container .left { float: left; } .container .center { margin: 0 auto; } .container .right { float: right; } .clear { clear: both; }
如果使用HAML和SASS，则为奖励点）
HAML：
.container .left .center .right .clear
上海社会科学院：
.container { right: 0; text-align: center; .left, .center, .right { display: inline-block; } .left { float: left; } .center { margin: 0 auto; } .right { float: right; } .clear { clear: both; } }
这可以通过使用CSS3 Flexbox轻松完成，这是将来使用的一项function（当<IE9完全死机时）几乎每个浏览器都会使用这个function。
检查浏览器兼容性表
HTML
<div class="container"> <div class="left"> Left </div> <div class="center"> Center </div> <div class="right"> Right </div> </div>
CSS
.container { display: flex; flex-flow: row nowrap; /* Align on the same line */ justify-content: space-between; /* Equal margin between the child elements */ }
输出：
.container { display: flex; flex-flow: row nowrap; /* Align on the same line */ justify-content: space-between; /* Equal margin between the child elements */ } /* For Presentation, not needed */ .container > div { background: #5F85DB; padding: 5px; color: #fff; font-weight: bold; font-family: Tahoma; }
<div class="container"> <div class="left"> Left </div> <div class="center"> Center </div> <div class="right"> Right </div> </div>
随着twitter引导：
<p class="pull-left">Left aligned text.</p> <p class="pull-right">Right aligned text.</p> <p class="text-center">Center aligned text.</p>
可能的答案，如果你想保持HTML的顺序，而不是使用flex。
HTML
<div class="a"> <div class="c"> the </div> <div class="ce"> jai ho </div> <div class="cd"> watsup </div> </div>
CSS
.a { width: 500px; margin: 0 auto; border: 1px solid red; position: relative; display: table; } .c { display: table-cell; width:33%; } .d { text-align: right; } .e { position: absolute; left: 50%; display: inline; width: auto; transform: translateX(-50%); }
代码Pen Link
有几个技巧可用于alignment元素。
01.使用表格技巧
.container{ display:table; } .left{ background:green; display:table-cell; width:33.33vw; } .center{ background:gold; display:table-cell; width:33.33vw; } .right{ background:gray; display:table-cell; width:33.33vw; }
<div class="container"> <div class="left"> Left </div> <div class="center"> Center </div> <div class="right"> Right </div> </div>
HTML：
<div id="container" class="blog-pager"> <div id="left">Left</div> <div id="right">Right</div> <div id="center">Center</div> </div>
CSS：
#container{width:98%; } #left{float:left;} #center{text-align:center;} #right{float:right;}
text-align:center; 给完美的中心alignment。
JSFiddle演示
我做了另一次尝试，以简化这个并实现它，而不需要一个容器。
HTML
.box1 { background-color: #ff0000; width: 200px; float: left; } .box2 { background-color: #00ff00; width: 200px; float: right; } .box3 { background-color: #0fffff; width: 200px; margin: 0 auto; }
CSS
.box1 { background-color: #ff0000; width: 200px; float: left; } .box2 { background-color: #00ff00; width: 200px; float: right; } .box3 { background-color: #0fffff; width: 200px; margin: 0 auto; }
你可以在JSFiddle上看到它
当我以图像为中心时，我必须对接受的答案作出以下改变：
- 确保图像封闭在一个div（在这种情况下
#center）。 如果不是，则必须将display设置为block，并且似乎相对于浮动元素之间的空间相对中心。 -
确保设置图像及其容器的大小：
#center { margin: 0 auto; } #center, #center > img { width: 100px; height: auto; }
你可以试试这个：
你的html代码是这样的：
<div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div>
和你的CSS代码是这样的：
#container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;}
所以，它的输出应该是这样的：
[[LEFT] [CENTER] [RIGHT]]
.processList text-align: center li .leftProcess float: left .centerProcess float: none display: inline-block .rightProcess float: right html ul.processList.clearfix li.leftProcess li.centerProcess li.rightProcess
你做得正确，你只需要清理你的花车。 只需添加
overflow: auto;
到你的容器类。
最简单的解决方法是创build一个包含3列的表格并将其放在表格中间。
HTML：
<div id="cont"> <table class="aa"> <tr> <td> <div id="left"> <h3 class="hh">Content1</h3> </div> </td> <td> <div id="center"> <h3 class="hh">Content2</h3> </div> </td> <td> <div id="right"><h3 class="hh">Content3</h3> </div> </td> </tr> </table> </div>
CSS：
#cont { margin: 0px auto; padding: 10px 10px; } #left { width: 200px; height: 160px; border: 5px solid #fff; } #center { width: 200px; height: 160px; border: 5px solid #fff; } #right { width: 200px; height: 160px; border: 5px solid #fff; }
#warpcontainer {width:800px; height:auto; border: 1px solid #000; float:left; } #warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
