html - 将图像对齐到左浮动 div 的底部

Question

尝试为我本地的漫画书集创建一个 WEB 界面。外观应该与 Apple 的 iBooks 非常相似——书的封面就放在书架上。封面相似但高度和宽度不相同。无法弄清楚如何在不指示包含 div 的宽度的情况下将图像覆盖到 div 的底部。使用 absolute-inside-relative 只是将封面堆成一堆。

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;}

您添加 line-height: 258px 以匹配封面 div 的高度。然后 vertical-align: bottom 在图像上。工作示例:

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