如何使IMG堅持一個div

我看到很多帖子和問題，問這個問題，但沒有對我有用的底部，所以我問另外一個問題。我有一個div已在它的一些文本，然後一個img，我有幾個這樣的divs的一排，當我打開不同分辨率的頁面的文本有時擴大到兩行，而不是一個，所以照片是不是同一級別。因爲我想讓OMG堅持到div的底部，所以當文本擴展時，它們仍然處於同一水平。有什麼建議嗎？如何使IMG堅持一個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;  
}

來源

2013-08-04 Anton.P

小提琴：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-04 12:32:46 DeiForm

您好，感謝您的回答，在我的代碼，當我編輯的IMG跑的CSS出DIV ...任何想法嘿？ –

你需要使div'position：relative;'因爲我在那裏 – DeiForm

嘗試position:absolute然後設置width，height和margin。

來源

2013-08-04 12:37:13

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

我建議你應該增加對出版項目新的div，然後新行IMG。爲這個新div的css添加一些代碼，用於發佈固定最小高度，然後爲圖像添加新行。無論如何，你可以在div class 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-04 13:07:13 cavaliercyber

如何使IMG堅持一個div

回答

相關問題