左，中，右对齐的div在同一行的底部 [英] Left, center, and right align divs on bottom of same line

问题描述

我有三个div的，我想显示在同一行。每三个具有不同的宽度和高度，并且它们不是直的文本。我想左对齐一个（一路左），右对齐另一个（一直到右）和中心第三（在包含分区的中间，整个页面在这种情况下， ）。

I have three divs that I would like to display on the same line. Each of the three has different widths and heights, and they are not straight text. I'd like to left-align one (all the way to the left), right-align another (all the way to the right), and center the third (in the middle of the containing div, the whole page in this case).

另外，我想这三个div的被垂直对齐到包含div的底部。我有垂直的解决方案将它们包含div的顶部。

In addition, I'd like the three divs to be vertically aligned to the bottom of the containing div. The solution I have vertically aligns them to the top of the containing div.

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

What is the best way to handle this?

推荐答案

通过你的容器格设置为的位置是：孩子的div相对和位置：绝对您可以绝对位置的容器的范围内的div

By setting your container div to position:relative and the child divs to position:absolute you can absolute position the divs within the confines of the container.

这很容易，因为您可以使用底部：0px 来调整所有垂直于容器的底部，然后用左/右造型沿位置横轴

This makes it easy, as you can use bottom:0px to align all vertically to the bottom of the container, and then use left/right styling to position along the horizontal axis.

我成立了一个工作的jsfiddle： http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ 并在code如下：

I set up a working jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ and the code follows:

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;
}

注：对于中心分区，该分区的利润率左= 1/2宽度：）

Note: For the "center" div, the margin-left = 1/2 the width of the div :)

希望有所帮助：）

这篇关于左，中，右对齐的div在同一行的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！