html - CSS垂直对齐底部问题

Question

我正在尝试使用 HTML 和 CSS 制作以下布局

|-----------------------------------------|
|box 1                                    |
|               -----------               |
|               | box 3   |               |
|---------------|         |---------------|
|---------------|         |---------------|
|box 2          |         |               |
|               |         |               |
|               |         |               |
|---------------|---------|---------------|

使用（类似）下面的代码，

<div class="box-one"></div>
<div class="box-two">
    <div class="box-three"></div>
</div>

.box-one {
    border: 1px solid red;
    height:50px;
    width: 400px;
}
.box-two {
    border: 1px solid green;
    height:100px;
    text-align : center;
    vertical-align: bottom;
    width: 400px;
}
.box-three {
    border: 1px solid black;
    height:120px;
    width: 50px;
}

演示 jsFiddle

但似乎box-two, text-align : center;&vertical-align: bottom;没有应用，所以输出不如预期。任何想法如何解决这个问题？

Answer 1

.box-three {
    border: 1px solid black;
    height:120px;
    width: 50px;
    margin: -21px auto 0 auto;
}

http://jsfiddle.net/4a4aD/7/

或者，更通用一点：

.box-two {
    /* ... */

    position: relative;
}

.box-three {
    /* ... */

    position: absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    bottom:0;
}

http://jsfiddle.net/4a4aD/9/

Answer 2

这是演示http://jsfiddle.net/4a4aD/10/

默认情况下为DIV display: block。要使用vertical-aligncss 属性，您需要开始使用display: table-cell或之类的属性display: inline-block。也text-align不会影响块元素，因此您添加的属性无效。

但看起来你在那里做了一些不同的事情。你有box-3重叠box-1。所以要么你需要给它一个负数margin-top，要么开始使用这样的绝对定位：

.box-one {
    border: 1px solid red;
    height:50px;
    width: 400px;
}
.box-two {
    position: relative;
    border: 1px solid green;
    height:100px;
    width: 400px;
}
.box-three {
    position: absolute;
    bottom: 0;
    left: 175px;
    border: 1px solid black;
    height:120px;
    width: 50px;
}

Answer 3

将 div 居中，您只需要使用margin: auto;.
所以它看起来像这样：
.box-three { margin: auto; border: 1px solid black; height:120px; width: 50px; }