css - 左、中、右对齐 div 在同一行的底部

Question

我想在同一行显示三个 div。三者各有不同的宽度和高度，而且不是直的文字。我想左对齐一个(一直向左)，右对齐另一个(一直向右)，第三个居中(在包含 div 的中间，在这种情况下是整个页面).

此外，我希望三个 div 与包含的 div 的底部垂直对齐。我的解决方案将它们垂直对齐到包含 div 的顶部。

处理这个问题的最佳方法是什么？

Answer 1

通过将容器 div 设置为 position:relative 并将子 div 设置为 position:absolute，您可以将 div 绝对定位在容器的范围内。

这很容易，因为您可以使用 bottom:0px 将所有内容垂直对齐到容器底部，然后使用左/右样式沿水平轴定位。

我设置了一个可用的 jsFiddle: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 :)

希望对您有所帮助:)