コミックのローカル コレクション用の WEB インターフェイスを作成しようとしています。ルックアンドフィールは、Apple の iBooks と非常に似ているはずです。ブックカバーが本棚に置かれています。カバーは似ていますが、高さと幅が同じではありません。含まれている 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/