css - 垂直对齐到底部与单个元素

Question

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

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

编辑

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

Answer 1

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

父元素：

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

子元素：

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

然后子元素的高度由其中的块元素定义，但它粘在底部

Answer 2

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

.container {
  position: relative;
}

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

Answer 3

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

假设裸骨标记：

<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/

使用内联块的替代方式

您也可以通过应用以下 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;
}

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

请参阅前面的小提琴演示。