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

debugcn 发表于 Dev

阿卜杜勒

我正在尝试将垂直对齐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

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

如果答案能够从硬编程的图像大小中抽象出来，则奖励积分。

凯文·尼尔森

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

顶部留有余量可以使宽度响应，但假定左边为静态高度，这也是一个不好的解决方案，因为您将文本放在左边的事实意味着您希望动态高度。

我敢说表吗？？？我知道，我知道，“可怕的主意”，对吗？但是<td>s的<td>高度为s，而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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。