Question

我在互联网上阅读了一些文章，说明如果元素是以下显示类型之一：inline，inline-block或table-cell，那么vertical-align应该管用。我创建了这个小提琴来检查它，但这似乎不正确。

遵循的ULTIMATE要求是什么，vertical-align始终有效？这是我的Fiddle。

Answer 1

在外部div上使用display: table-cell和vertical-align: bottom：

.a1{
    height: 300px;
    background: #ccc;
    display: table-cell;
    vertical-align: bottom;
}

.a2 {
    height: 20px;
    background-color: #f00;
}

JSFiddle

Answer 2

使用相对/绝对定位而不是vertical-align。

.a1{
    height: 300px;
    position: relative;
    background-color: green;
}

.a2 {
    height: 20px;
    display: inline-block;
    background-color: #f00;
    vertical-align: bottom;
    position:absolute;
    bottom:0;
    left:0;
}

DEMO

垂直对齐不起作用，但应该

2 个答案: