如何把這個A HREF在div底部

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）的底部，而無需使用高度在以前的divs中。

我該怎麼做？

Answer 1

這裏的解決方案：http://jsfiddle.net/N7GWV/1/

給.ultime_boxposition: 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; 
} 

這應該做您的需要。基本上，這完全取決於divs的位置屬性。

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>