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

Question

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

问题在于(如标题和 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