बाएं-फ़्लोटेड div

Question

मेरे कॉमिक पुस्तकों के स्थानीय संग्रह के लिए वेब इंटरफ़ेस बनाने का प्रयास करने के लिए छवि को संरेखित करें। लुक'फेल एप्पल के आईबुक के समान ही होना चाहिए - पुस्तकें बुकशेल्व पर बैठे हैं। कवर समान हैं लेकिन ऊंचाई और चौड़ाई में समान नहीं हैं। युक्त 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> 

सीएसएस:

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 उदाहरण: .cover यह आप स्थिति को जोड़ने के लिए अनुमति देता है के सापेक्ष: http://jsfiddle.net/NATqD/

Answer 1

इस सीएसएस का प्रयास करें:

.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;} 

आप कवर div की ऊंचाई मैच के लिए line-height: 258px जोड़ें। फिर छवियों पर vertical-align: bottom। कार्य उदाहरण:

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

Answer 2

स्थिति जोड़े पूर्ण करने के लिए छवि और इस प्रकार आप पूरी तरह से div के सापेक्ष छवियों को स्थिति दे सकते हैं।

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

Answer 3

यह मेरे लिए सबसे सीधी-सपाट लगता है:

फ़ायरफ़ॉक्स और क्रोम में

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

काम करता है।