将图像垂直对齐到引导“列"内的底部? [英] Vertically aligning an image to the bottom inside a bootstrap “column”?

问题描述

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

I am trying to vertically align an img to the bottom of a containing Bootstrap column.

这怎么完成?

<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

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

In above example, there are three containers. Each container has a distinctive color. I want the blueish image to touch the bottom blue container, not the top green container.

如果答案能够从硬编程的图像尺寸中抽象出来，奖金就会指向.

Bonus points if answer is able to abstract away from hard-programmed image sizes.

推荐答案

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

This is probably not the solution you are looking for...but the only way that I could think of to do it was to absolutely position the column within the row. While this allows the column on the left to be a dynamic height, it loses the responsiveness...you'd probably have to define set widths for differing media.

上边距允许宽度响应，但假定左边的高度是静态的，这是一个不好的解决方案，因为您将文本放在左栏中的事实意味着您想要一个动态的高度.

A margin-top would allow the width to be responsive but would assume static height on the left, which is, I'm assuming, also not a good solution, since the fact that you put text in the left column implies you want a dynamic height.

我敢说表吗?我知道，我知道，可怕的主意"，对吗?但是<td>的拉伸方向是<td>的高度在左侧，而vertical-align:bottom;在TD内工作.您可以决定是错误的做法还是实际的解决方案.

Dare I say TABLE??? I know, I know, "horrible idea", right? But the <td>s stretch with the <td>s on the left in height, and the vertical-align:bottom; works within a TD. Bad practice, or a practical solution, you decide.

<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>

这篇关于将图像垂直对齐到引导“列"内的底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！