[英]Align image to the bottom of a left-floated div
尝试为我的本地漫画集创建一个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/
试试这个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
图像vertical-align: bottom
。 工作示例:
这对我来说似乎是最直接的:
<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;
}
适用于Firefox和Chrome。
相对于.cover添加位置:这可以让您向图像添加绝对位置,因此您可以相对于div绝对定位图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.