Question

我的代码中使用了bootstrap，我有以下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与“bottom”类始终保持在顶部div（image_div）的底部。请建议我如何实现这个目标？

Answer 1

我认为正确的解决方案是将bottom div置于绝对位置。像这样：

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

您还必须将position的{{1}}设置为image_div才能使其正常工作，因为位置绝对需要知道它应该用作定位的参考。

有像vertical-align：bottom这样的属性，但我建议不要使用它们，因为它们要求你使用display：table-cell和/或其他丑陋的CSS。

修改
为了使价格显得最高，我会改变这一点：

relative

进入这个：

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

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

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

我也很确定底部div上的.price { position: absolute; top: 0; right: 0; display: block: }不是必需的。

div内的bootstrap文本总是在底部

1 个答案: