1

我的代码中有以下使用引导程序的 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;
     }

在上面的代码中，我希望带有“底部”类的内部 div 始终保持在顶部 div (image_div) 的底部。请建议，我怎么能做到这一点？

4

1 回答 1

5

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

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

您还必须将 的 设置position为image_div使其relative工作，因为绝对位置需要知道它应该使用什么作为定位参考。

有诸如垂直对齐：底部之类的属性，但我建议不要使用它们，因为它们要求您使用 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 不是必需的。

于 2013-04-03T22:00:08.130 回答