Question

我正在尝试使用HTML＆amp; amp; 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;
}

Demo jsFiddle

但似乎box-two，text-align : center;＆amp;未应用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-align css属性，您需要开始使用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; }

CSS垂直对齐底部问题

3 个答案: