2015-10-13 100 views
0

我有一個div,屏幕高度的100%,DIV的頂部是一張桌子......想法是當時在底部有一個圖像的白色空間DIV。當我添加圖像時,它直接出現在表格下方,而不是頁面底部。我怎樣才能解決這個問題?我已經嘗試了很多東西,谷歌搜索...如何讓一個圖像顯示在div的底部

display:block 
margin:0 auto; 
bototm:0px 

但沒有喜悅,有沒有人有任何想法?謝謝

+0

請分享代碼其中用於追加圖像 – Ripun

+0

代碼中有錯字 - bototm:0px。另外,如果沒有相應的位置屬性,則不能擁有底部屬性 - 例如position:absolute,position:relative – richhastings

+0

@John嘗試創建[** Minimal,Complete和Verifiable示例**](http://stackoverflow.com/help/mcve),因爲這將幫助他們爲您提供適當的解決方案。 – vivekkupadhyay

回答

1

position: relative添加到父div然後將position: absolute; bottom:0px;添加到圖像。這在大多數情況下都適用,但是由於您沒有發佈完整的代碼,因此可能會有所不同。 PS你有一個錯字bottom

Codepenhttp://codepen.io/noobskie/pen/epEPYw

+0

而你也可以通過發表評論而不是回答。 – vivekkupadhyay

+0

@vivekkupadhyay我仍然認爲這是一個可以接受的答案,因爲從約翰所描述的這可以工作 – NooBskie

0

Flexbox的是這樣做的一種方式:http://codepen.io/zvona/pen/BodqBY

HTML:

<div> 
    <img src='...' /> 
</div> 

CSS:

div { 
    display: flex; 
    flex-direction: row; 
} 

img { 
    align-self: flex-end; 
} 
+0

哦,我注意到你有一張桌子上方的圖像。這個例子不會工作。也許最好用'position:絕對;底部:0px;'招。 – zvona