左，中间和右对齐同一行底部的div 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; 
} 

注：对于 “中心” 的div，保证金-left = div的宽度的一半:)

希望帮助:)

Answer 2

设置position: relative上包含分区，设置position: relative您3个的div，并设置3周的div的bottom属性0：

bottom: 0 

Answer 3

为了让您的中心div的弹性，你可以这样做：

<div style="display:table; width:500px;"> 
    <div style="display:table-row;"> 
    <div style="display:table-cell; width:50px;"></div> 
    <div style="display:table-cell;"></div> 
    <div style="display:table-cell; width:50px;"></div> 
    </div> 
</div> 

Answer 4

我的技术类似于@达-AT-SF：

我试图严格证明你问的所有要求对于。

Live Demo

HTML：

<div id="container"> 

    <div id="left"></div> 
    <div id="mid"></div> 
    <div id="right"></div> 

</div> 

CSS：

#container { 
    position: relative; 
    height: 400px; 
    width: 80%; 
    min-width: 400px; 
    margin: 0 auto; 

    background: #ccc 
} 
#left, #right, #mid { 
    position: absolute; 
    bottom: 0; 
} 
#left { 
    left: 0; 
    width: 80px; 
    height: 200px; 

    background: red 
} 
#right { 
    right: 0; 
    width: 120px; 
    height: 170px; 

    background: blue 
} 

#mid { 
    left:50%; 

    margin-left: -80px; 
    width: 160px; 
    height: 300px; 

    background: #f39 
} 

Answer 5

进一步增强了第一个答案：

在 “中心” DIV + CSS，你需要添加：

text-align:center; 

在 “正确” 的DIV + CSS，你需要添加：

text-align:right; 

...完美实现左/ /右对齐。