将图像与左浮动div的底部对齐
将图像与左浮动div的底部对齐
提问于 2012-09-25 09:46:57
尝试为我本地的漫画书集合创建一个WEB界面。外观的感觉应该非常类似于苹果的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/
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-09-25 10:07:29
试试这个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/
Stack Overflow用户
发布于 2012-09-25 10:09:40
对我来说，这似乎是最直接的：
<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。
Stack Overflow用户
发布于 2012-09-25 09:58:06
添加position: relative to the .cover这允许您将position: absolute添加到图像，因此您可以绝对相对于div来定位图像。
http://jsfiddle.net/NATqD/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12575210
复制相关文章
相似问题
腾讯云开发者
