html - 如何使图像粘在div的底部

Question

我看到很多关于这个问题的帖子和问题，但没有一个对我有用，所以我问了另一个。我有一个 div，里面有一些文本，然后是一个 img，我有几个连续的 div，当我打开在不同分辨率的页面上，文本有时会扩展为两行而不是一行，因此图片不在同一水平面上。因此，我想让 OMG 贴在 div 的底部，这样当文本展开时，它们仍将处于同一水平。有什么建议么？

代码:

<div id="put_entry" class="main_banner">
    <h1>
        <center>
            <a href="published.php">published</a>
        </center>
    </h1>
    <center>i published those items<br /><center>
    <center>
        <img src="search_torent.png" id="index_banner" onclick="document.location='published.php';return false;"/>
    </center>
</div>

CSS:

.main_banner{
    margin-left: 15px;
    direction: rtl;
    border-radius: 10px;
    background: #D1E3F3;    
    border: 1px solid #707070;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    min-height: 273px;
    width: 270px;
    float: left;
}

.main_banner img{
        cursor: pointer;    
}

Answer 1

fiddle :http://jsfiddle.net/EFPt7/

.main_banner{
    margin-left: 15px;
    direction: rtl;
    border-radius: 10px;
    background: #D1E3F3; 
    border: 1px solid #707070;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    min-height: 273px;
    width: 270px;
    float: left;
    position: relative;
}

.main_banner img{
    cursor: pointer; 
    position: absolute;
    bottom: 0;
}