css - 将图像垂直对齐到 Bootstrap “column” 内的底部？

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>用 <td> 拉伸(stretch)一下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>