0

我看到很多关于这个问题的帖子和问题，但没有一个对我有用，所以我问另一个。我有一个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;    
}
4

3 回答 3

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;
}
于 2013-08-04T12:32:46.367 回答
0

小提琴：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;
}
于 2013-08-04T13:07:13.373 回答
0

尝试position:absolute然后设置width,height和margin.

于 2013-08-04T12:37:13.703 回答