如何在响应式设计中将多个子元素锚定到父元素的底部？

Question

我有一个具有 Bootstrap 3 的 .row CSS 类的父元素。在这个元素中有两个子元素（每个都有一个 Bootstrap 列类），其中一个具有不同的高度，具体取决于填充它的数据。在我正在使用的设计中，该行中的元素需要锚定到父元素的底部。

关键（正如标题和引导程序的使用所暗示的）是这需要响应。因此，使用bottom: 0px; 绝对定位子元素不是一种选择。

这是 html 的当前结构：

<div class="row r4">
    <div class="col-md-2">
        <div class="bottom">
            <div data-bind="text: description()"></div>
            <span data-bind="text: metric()"></span>
        </div>
    </div>
    <div class="col-md-8">
        <div class="bottom">
            <div data-bind="foreach: keyLabels()">
                <div class="key-color">
                    <div data-bind="attr: {class: color + ' color-value'}"></div>
                    <div data-bind="text: label"></div>
                </div>
            </div>
        </div>
    </div>
</div>

我进行了一些研究，但没有找到一种可靠的方法来使用纯 HTML/CSS 解决方案来解决这个问题。

我可以想出一些相当直接（尽管很老套）的方法来用 JS 解决这个问题，但现在我想尽可能避免这种情况。

有什么想法吗？

Answer 1

这是您的标记的简化版本，有助于更轻松地重现问题：

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

那么我们如何将每一列垂直对齐到底部呢？见vertical-align with bootstrap 3：

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

Working Demo in jsFiddle