实施例

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 ??? 我知道，我知道，＆＃34;可怕的想法＆＃34;，对吧？但是<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>

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

实施例

1 个答案: