div中的引导文本始终在底部

Question

我在代码中使用引导程序使用了以下HTML。

<div class="row-fluid image_div">
        <h4 class="text-center"><a href="/category">name_of_item</a></h4>
         <a target="_blank" href="link_for_item">
            <img class="item-size" src="photo.url" alt="name_of_item"/>
        </a>
        <p> quick_summary </p>
        <div class="row-fluid">
            <span class="pull-right"><b class="price">£ price </b></span>
        </div>
        <div class="row-fluid bottom">
            <a class="btn btn-small btn-warning pull-left" href="/user">Add To Wish List</a>
            <a target="_blank" 
               class="btn btn-info pull-right" 
               href="link_for_item">
                Check It Out
            </a>
        </div>
    </div>

而且我有如下定义的最高div（image_div）高度

    .image_div{
    height: 450px;
     }

在上面的代码中，我希望带有“ bottom”类的内部div始终停留在顶部div（image_div）的底部。请提出建议，我该如何实现？

Answer 1

我认为正确的解决方案是将bottomdiv 定位为绝对。像这样：

.bottom {    
    position: absolute;
    bottom: 0;
}

您还必须设置position的image_div，以relative使其工作，位置绝对需要知道它应该作为定位的基准使用。

有一些属性，例如vertical-align：bottom，但我建议不要使用它们，因为它们要求您使用display：table-cell和/或其他丑陋的CSS。

编辑：
为了使价格显示在顶部，我将更改此：

<div class="row-fluid">
    <span class="pull-right"><b class="price">£ price </b></span>
</div>

到这个：

<span class="price">£ price </span>

然后以相同的方式将其绝对定位：

.price {
 position: absolute;
 top: 0;
 right: 0;
 display: block:
}

我也很确定.row-fluid不需要底部的div。