將圖像對齊到左浮動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的底部

回答

相關問題