Richten Sie das Bild an der Unterseite eines linksbündigen Divs aus.

Question

Der Versuch, eine WEB-Schnittstelle für meine lokale Sammlung von Comic-Büchern zu erstellen. Das Look'n'feel sollte Apples iBooks sehr ähnlich sein - Buchumschläge sitzen auf dem Bücherregal. Die Abdeckungen sind ähnlich, aber nicht identisch in Höhe und Breite. Kann nicht herausfinden, wie die Bildabdeckungen auf den unteren Rand des div geschoben werden, ohne die Breite des enthaltenden div anzugeben. Das Gehen mit Absolute-Inside-Relative stapelt die Covers einfach in einen Stapel.

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 Beispiel: http://jsfiddle.net/NATqD/

Answer 1

Versuchen Sie, diese 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;} 

Sie line-height: 258px fügen Sie die Höhe der Abdeckung div anzupassen. Dann vertical-align: bottom auf den Bildern. Arbeitsbeispiel:

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

Answer 2

die Position hinzufügen: in Bezug auf die .Abdeckung dies ermöglicht es Ihnen, die Position hinzuzufügen: absolut das Bild und damit können Sie die Bilder absolut relativ zum div positionieren.

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

Answer 3

Dies scheint die straight-forward mir:

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

Arbeiten in Firefox und Chrome.