HTML CSS IMAGE - 配置

Question

情報の上部に大きなDIVがあります。 私も画像があり、画像が一番下にくるようにしたい。 私はそれを押し下げるのに大きなマージンを使うことができましたが、より良い方法が必要です。 コードの一部：

画像：どのように私は、DIVの最下部に座って画像を取得することができます

<div id="containerBody"> 
    <div id="facebookTwitter"> 
    <img src="images/site/common/social-media-twitter-seemeagain-dating2.png"/> 
    </div> 
</div 

画像サイズ1500

* 960周りのサイズ100 * 300の周りとDIV ？ DIVに既に入っているテキストと画像は、浮動小数点を左に使用しています - 上に近づきます。

THX

Answer 1

1つの方法は、画像を含むdivを正確に配置する場所をdivdivに配置することです（CSSのabsolute）。これは重要な側面であることに注意してください。それ以外の場合は、ブラウザウィンドウに対してabsoluteと表示されます。

だから、のようなもの：私はJSFiddleにここにあなたのための例を作っ

div#containerBody { 
    width: 100%; 
    height: 500px; 
    background-image:url('images/site/common/social-media-twitter-seemeagain-dating2.png'); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
} 

：簡単に解決策はちょうどこのようなあなたのcontainerBodyのdivのbackground CSSプロパティを使用することです

div#containerBody { 
    position: relative; 
} 


div#facebookTwitter { 
    position: absolute; 
    bottom: 0px; 
    height: 35px; //should be your image height 
    width: 120px; //should be your image width 
} 

。

Answer 2

はこのCSSを試してみてください：

#facebookTwitter{ 
position:relative; 
} 


#facebookTwitter img{ 
position:absolute; 
bottom:0px; 
} 

Answer 3

#facebookTwitter img{ 
     vertical-align:bottom; 
} 

Answer 4

あなたが代わりに浮いの絶対位置を使用する必要があります。

余白をつけた場合、ページが高くなり画像が画像の下をたどらない場合、マージンは変わりません。

Check this example。