Question

我在这个问题上看到很多帖子和问题，但没有一个对我有用，所以我问另一个。我有一个div，其中包含一些文字，然后是img，我连续有几个divs，当我打开不同分辨率的页面时，文本有时会扩展为两行而不是一行，因此图片不在同一级别。因为我想让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

小提琴：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;
}

Answer 2

尝试position:absolute，然后设置width，height和margin。

Answer 3

小提琴：http://jsfiddle.net/EFPt7/15/

我建议您为已发布项添加新div，然后为img添加新行。为此新增div的css添加一些代码，用于发布的固定最小高度，然后为图像添加新行。无论如何，你可以在div类main_banner中使用align。

--- --- HTML

<div id="put_entry" class="main_banner" align="center">
    <div>
    <h1><a href="published.php">published</a></h1>
        i published those items
        <br/>
    </div>
    <img src="https://www.google.co.th/images/srpr/logo4w.png" 
    id="index_banner" 
    onclick="document.location='published.php';return false;"  
    width="270px"/>
</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;
     width:270px;
     float:left;
}

.main_banner img{
     cursor:pointer; 
}

.main_banner div{
     min-height:273px;
}

如何使IMAGE粘贴到div的底部

3 个答案: