Html 将图像与左浮动div的底部对齐

正在尝试为我的本地漫画集创建一个WEB界面。它的外观应该与苹果公司的iBooks非常相似——书架上的书籍封面。这些盖子相似，但高度和宽度不同。在不指示包含div的宽度的情况下，无法理解如何将图像封面推到div的底部。使用绝对内部相对将封面堆叠成一堆

HTML:

JSFIDLE示例：

---

添加位置：相对于封面。这允许您将位置：绝对添加到图像中，因此您可以绝对相对于div定位图像

试试这个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;}

添加

行高：258px

以匹配封面div的高度。然后在图像上添加

垂直对齐：底部

。工作示例：

---

对我来说，这似乎是最直截了当的：

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

.掩护{
线高：258px；
高度：258px；
边框：1px纯红；
保证金：0px 5px 25px 5px；
}

---

适用于Firefox和Chrome。

Hey 1695953！有趣的问题（+1），尽管JSFIDLE可能没有显示您想要显示的内容，但这就是您所说的：在他的问题中，他说他不想指定容器的宽度。你的答案包括一个，没错。我不想在运行时硬编码宽度或设置。这样做的目的是让div包装包含的封面图像。为什么不使用width？这是因为封面图像大小不同吗？只要更改视口宽度/高度（浏览器窗口大小），它就会将所有图像推出包含div的区域之外，而不是将封面沿书架回流。您可以操纵

字体大小和
行高来找到正确的组合。虽然我想你在书的下面有一个架子来补偿，但这似乎使它完全围绕在一起：顺便说一句，我把弗雷迪的想法放远了一点。将封面放在任何给定架子的中心似乎是合乎逻辑的。将所有包装器div隐藏到一个以文本对齐为中心的p中。结果如下：
.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 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;
}