左,中,右对齐同一行底部的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 = 1/2 div的宽度:)

希望有帮助:)

Answer 2

我的技术类似于@Damien-at-SF：

我试图严格证明您要求的所有要求。

现场演示

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
}