Question

我有this代码：

<div class="ultime_box">
    <div class="ultime_box_photo">
        Photo
    </div>

    <div class="ultime_text">
        <div class="ultime_box_title">
            Title
        </div>

        <div class="ultime_box_description">
            Description
        </div>

        <a href="#" class="ultime_box_vai">link</a>
    </div>
    <div class="clear"><!--- --></div>
</div>

.ultime_box
{
    margin:15px 27px 35px 20px;
    color:#FFFFFF;
    font-size:13px;
    height:100px;
    background-color:#cdcccc;
}

.ultime_box_photo
{
    width:120px;
    margin-right:15px;
    float:left;
}

.ultime_text
{
    float:left;
    width:299px;
}

.ultime_box_title
{
    color:#000000;
    font-weight:bold;
    font-size:12px;
    text-transform:uppercase;
    line-height:12px;
    padding-bottom:13px;    
}

.ultime_box_description
{
    color:#FFFFFF;
    font-size:11px;
    line-height:13px;
    padding-bottom:13px;     
}

a.ultime_box_vai:link, a.ultime_box_vai:visited
{
    color:#000000;
    font-weight:bold;
    font-size:12px;
    line-height:12px;  
    text-decoration:none;
}

a.ultime_box_vai:hover 
{
    text-decoration:underline;
}

我想将链接放在容器div（ultime_box）的底部，而不使用前面div中的高度。

我该怎么做？

Answer 1

以下是解决方案：http://jsfiddle.net/N7GWV/1/

提供.ultime_box position: relative和您的链接position: absolute; bottom: 0。

.ultime_box
{
    margin:15px 27px 35px 20px;
    color:#FFFFFF;
    font-size:13px;
    height:100px;
    background-color:#cdcccc;
    position: relative;
}

a.ultime_box_vai:link, a.ultime_box_vai:visited
{
    color:#000000;
    font-weight:bold;
    font-size:12px;
    line-height:12px;  
    text-decoration:none;
    position: absolute;
    bottom: 0;
}

Answer 2

.ultime_text
{
    float:left;
    width:299px;
    position:relative;
}

a.ultime_box_vai:link, a.ultime_box_vai:visited
{
    color:#000000;
    font-weight:bold;
    font-size:12px;
    line-height:12px;  
    text-decoration:none;
    position:absolute;
    bottom:0px;
}

这应该做你需要的。基本上，它都取决于div的位置属性。

This quick guide应该清除它。

Answer 3

你可以让你的底部链接有这个css：

a.bottomLink{
    float:left;
    width:100%;
}

由于您的容器div高度是动态的（基于内容），您的底部链接将位于底部。如果我明白了，你想把链接放在ultime_box的底部，那么你的html应该是这样的：

<div class="ultime_box">
    <div class="ultime_box_photo">
        Photo
    </div>

    <div class="ultime_text">
        <div class="ultime_box_title">
            Title
        </div>

        <div class="ultime_box_description">
            Description
        </div>

        <a href="#" class="ultime_box_vai">link</a>
    </div>
    <div class="clear"><!--- --></div>
    <a href="#" class="bottomLink">bottom</a>
</div>

如何将这个href放在div的底部

3 个答案: