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

尝试为我的本地漫画集合创建WEB界面。 look'n'feel应该与Apple的iBooks非常相似 - 书架上的图书封面。封面的高度和宽度相似但不完全相同。无法弄清楚如何将图像覆盖物推到div底部，而不显示包含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/

来源

2012-09-25 Shurik76

嘿1695953！有趣的问题（+1），虽然jsfiddle可能不显示你想要显示的内容 – Cedric

这是你在说什么：http://jsfiddle.net/userdude/NATqD/2/ –

试试这个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相匹配的盖格的高度。然后在图像上vertical-align: bottom。工作示例：

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

来源

2012-09-25 02:07:29 Fredy

谢谢！这正是我所想的！ – Shurik76

很好。那么，是的，这是一个好主意...... –

@ user1695953：不客气:) – Fredy

添加位置：相对于设备罩起来这允许您添加的位置：绝对给图像，因此您可以将图像相对于div绝对定位。

http://jsfiddle.net/NATqD/1/

来源

2012-09-25 01:58:05 rsoneill21

在他的问题中，他说他不想在容器上指定宽度。你的答案包括一个。 – mrtsherman

没错。我不想对宽度进行硬编码或在运行时进行设置。这个想法是让div来包装包含封面图片。 – Shurik76

为什么你不想使用宽度？是否因为封面图片大小不同？ – rsoneill21

这似乎是最直接的对我说：

<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。

来源

2012-09-25 02:09:40

只要您更改视口宽度/高度（浏览器窗口大小），它就会将包含div之外的所有图像推出，而不是在搁板旁边重新放置封面。 – Shurik76

您可以操作'font-size'和'line-height'来找到合适的组合。这似乎使它完全环绕，虽然我想你有一个书架下的书架来弥补：http://jsfiddle.net/NATqD/9/ –

明白了。谢谢！ http://jsfiddle.net/FTrGs/ – Shurik76

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

回答

相关问题