使用单个元素垂直对齐底部

Question

我有一个具有特定尺寸的持有人 div，并且有一个不同高度的子元素，我正在尝试将其与基线对齐。目前，我有第二个元素，它与容器具有相同的固定高度，使其与底部对齐，但如果它是独立的，它会粘在顶部，无论应用什么规则。

那么，如果一个元素是唯一的子元素，如何垂直对齐容器底部？

编辑

在发布我正在使用的代码的过程中，我想出了一个已发布的解决方案。最初的问题与此类似，但没有position 规则和子元素上的display:inline-block。这几乎就是它的长短......

Answer 1

该死的，在发布问题后想到了一个很好的解决方案：

父元素：

.parent {
    height:200px;
    position:relative;
    width:200px;
}

子元素：

.parent > * {
    bottom:0px;
    left:0px;
    position:absolute;
    right:0px;
}

Child 元素的高度随后由其中的块元素定义，但它始终位于底部

Answer 2

使用表格单元格的一种方式

假设是基本的标记：

<div class="wrap">
    <div>Some content...</div>
</div>

下面的 CSS 可以做到：

.wrap {
    border: 1px solid red;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: bottom;
}

主要优势：适用于内联和块级元素。
缺点：旧版浏览器无法识别display: table-cell

演示地址：http://jsfiddle.net/audetwebdesign/eXKbt/

使用 inline-block 的替代方式

您也可以通过应用以下 CSS 来做到这一点：

.wrap2 {
    border: 1px solid red;
    height: 200px;
    width: 200px;
}
.wrap2:before {
    content: "";
    width: 0;
    height: 190px;
    display: inline-block;
}
.wrap2 div {
    display: inline-block;
    width: 190px;
    border: 1px dotted red;
    vertical-align: bottom;
}

但是，这种方法涉及使用伪元素来定义一个虚构的内联块，以将基线设置为接近盒子的整个高度，然后在子元素上使用垂直对齐。存在与宽度相关的一些问题，但可以使其正常工作。

参见前面的小提琴演示。

Answer 3

没有太多细节可讲，但可能是这样的

.container {
  position: relative;
}

.child-element {
  position: absolute;
  bottom: 0;
}