我想在同一行显示三个 div。这三个都有不同的宽度和高度，并且它们不是直文本。我想左对齐一个（一直到左边），右对齐另一个（一直到右边），然后将第三个居中（在包含 div 的中间，在本例中是整个页面） ）。
此外，我希望这三个 div 与包含的 div 的底部垂直对齐。我的解决方案将它们垂直对齐到包含 div 的顶部。
处理这个问题的最佳方法是什么？
通过将容器 div 设置为position:relative孩子潜入position:absolute您可以将 div 绝对定位在容器的范围内。
这很容易，因为您可以使用bottom:0px将所有内容垂直对齐到容器的底部，然后使用左/右样式沿水平轴定位。
我设置了一个工作 jsFiddle：http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ http://jsfiddle.net/Damien_at_SF/KM7sQ/5/代码如下：
HTML:
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
CSS:
#container {
position:relative;
height:400px;
width:100%;
border:thick solid black;
}
#container div {
background:grey;
width:200px;
}
#left {
position:absolute;
left:0px;
bottom:0px;
}
#center {
position:absolute;
left:50%;
margin-left:-100px;
bottom:0px;
}
#right {
position:absolute;
right:0px;
bottom:0px;
}
注意：对于“center”div，margin-left = div 宽度的 1/2 :)
希望有帮助:)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
