在引导程序“列”内将图像垂直对齐到底部？

Question

我正在尝试将 img 垂直对齐到包含 Bootstrap 列的底部。

如何做到这一点？

---

示例

<div class="container-fluid" style="background-color: #00ff00">
    <div class="row">
        <div class="col-sm-offset-4 col-sm-4">
             <h1>green container</h1>
        </div>
    </div>
</div>

<div class="container-fluid" style="background-color: #ff0000">
    <div class="row">
        <div class="col-sm-offset-4 col-sm-4">
            <h1>red container with lots of</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
        </div>
        <div class="col-sm-4">
            <img src="http://dummyimage.com/200x200/00a/fff.png?text=I+want+to+touch+the+blue+container"/>
        </div>
    </div>
</div>

<div class="container-fluid" style="background-color: #0000ff">
    <div class="row">
        <div class="col-sm-offset-4 col-sm-4">
             <h1>blue container</h1>
        </div>
    </div>
</div>

JSFiddle

在上面的例子中，有三个容器。每个容器都有独特的颜色。我希望蓝色图像触摸底部的蓝色容器，而不是顶部的绿色容器。

---

如果答案能够从硬编程的图像尺寸中抽象出来，则加分。

Answer 1

这可能不是您正在寻找的解决方案...但我能想到的唯一方法是将列绝对定位在行中。虽然这允许左侧的列成为动态高度，但它会失去响应能力......您可能必须为不同的媒体定义设置宽度。

margin-top 将允许宽度响应，但会假定左侧为静态高度，我假设这也不是一个好的解决方案，因为您将文本放在左侧列中意味着您想要一个动态的高度。

我敢说 TABLE??? 我知道，我知道，“可怕的想法”，对吗？但是<td>s 的高度与左侧的<td>s 和vertical-align:bottom; 一起拉伸。在 TD 内工作。不好的做法，或实用的解决方案，由您决定。

<div class="row" style='position:relative;'>
    <div class="col-sm-offset-4 col-sm-4">
        <h1>red container with lots of</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
    </div>
    <div class="col-sm-4" style='position:absolute;bottom:0;right:0;'>
        <img src="http://dummyimage.com/200x200/00a/fff.png?text=I+want+to+touch+the+blue+container"/>
    </div>
</div>