イメージを左浮動小数点divの一番下に合わせる

Question

ローカルの漫画コレクションのためのWEBインターフェイスを作成しようとしています。 look'n'feelは、AppleのiBookと非常によく似ているはずです。ブックは本棚に座っています。カバーは類似していますが、高さと幅は同じではありません。含まれているdivの幅を示さずに、画像のカバーをdivの下部に押し込む方法を理解できません。相対的な内部相対関係を持つことは、カバーを積み重ねるだけです。

HTML：

<div class="cover"><a href="#"><img src="cover1.jpg"></a></div> 
<div class="cover"><a href="#"><img src="cover2.jpg"></a></div> 
<div class="cover"><a href="#"><img src="cover3.jpg"></a></div> 

CSS：

body {background-image: url(http://image.bayimg.com/oaddpaaea.jpg); background-repeat: repeat;} 
.cover {float: left; height: 258px; border: 1px solid red; margin: 0px 5px 25px 5px;} 
.cover img {border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;} 

jsFiddle例： http://jsfiddle.net/NATqD/

Answer 1

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

.cover { float: left; height: 258px;line-height: 258px; border: 1px solid red; margin: 0px 5px 25px 5px;} 
.cover img {vertical-align: bottom; border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;} 

あなたはカバーのdivの高さに一致するようにline-height: 258pxを追加します。その後、画像上にvertical-align: bottom例作業：

http://jsfiddle.net/NATqD/6/

Answer 2

位置を追加します。.coverに対するこれは、あなたがポジションを追加することができます：絶対画像とdivを基準にして画像を絶対的に配置することができます。

http://jsfiddle.net/NATqD/1/

Answer 3

これは私に最もストレートフォワードのようだ：

<div class="cover"> 
    <a href="#"><img src="http://www.emeraldinsight.com/fig/53_10_1108_S0731-9053_2009_0000024005.png"></a> 
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00404130.jpg"></a> 
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00624371.jpg"></a> 
    <a href="#"><img src="http://www.lauren-myers.com/_img/right_arrow.jpg"></a> 
    <a href="#"><img src="http://www.gotohoroscope.com/img/bg_00.gif"></a> 
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00404091.jpg"></a> 
    <a href="#"><img src="http://www.startplay.co.uk/images/play.png"></a> 
    <a href="#"><img src="https://www.educorporatebridge.com/old_back_up_16-07-12/images/foundcourses.png"></a> 
    <a href="#"><img src="http://s1.hao123.com/index/images/temple_bg.gif"></a> 
</div> 

.cover { 
    line-height: 258px; 
    height: 258px; 
    border: 1px solid red; 
    margin: 0px 5px 25px 5px; 
} 

http://jsfiddle.net/NATqD/5/

のFirefoxとChromeで動作します。