इनलाइन-ब्लॉक के साथ मिसाइलमेंट (अन्य तत्व नीचे धक्का)

Question

मैं एक पंक्ति में छोटे बक्से को संरेखित करने की कोशिश कर रहा हूं। इन बक्से में प्रत्येक में 2 तत्व होते हैं। कुछ मामलों में, पहला तत्व इतना "बहुत" पाठ है, यह 2 लाइनों में विभाजित होता है। यदि ऐसा होता है, तो इस विशेष पंक्ति में अन्य सभी ब्लॉक नीचे दिखाए जाते हैं। http://jsfiddle.net/PMRQ5/

आप HTML क्षेत्र का आकार बदलने के हैं, तो आप देख सकते हैं कि मैं क्या मतलब है:

लंबी कहानी संक्षेप में, यहाँ उदाहरण है। क्या कोई मदद कर सकता है?

.songlist .even { 
 
    background: #c2e4fa; 
 
    background: -moz-linear-gradient(top, #d9eefc, #c2e4fa); 
 
    margin-right: 5px; 
 
} 
 
.songlist .odd { 
 
    background: #faf4c2; 
 
    background: -moz-linear-gradient(top, #fcf8d9, #faf4c2); 
 
    margin-right: 5px; 
 
} 
 
.songlist .itemBox { 
 
    font-size: 11px; 
 
    width: 220px; 
 
    min-height: 100px; 
 
    clear: both; 
 
    padding: 5px; 
 
    margin: 5px 10px 5px 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
    border-radius: 4px; 
 
} 
 
.songlist .itemBox .title { 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
} 
 
.songlist .itemBox .artist { 
 
    clear: left; 
 
    font-size: 11px; 
 
} 
 
.songlist .itemBox .titlerating { 
 
    bottom: 10px; 
 
    left: 10px; 
 
    position: absolute; 
 
} 
 
.songlist .itemBox .dance { 
 
    bottom: 5px; 
 
    right: 10px; 
 
    position: absolute; 
 
}

<div class='songlist'> 
 
    <div class='itemBox even'> 
 
    <div class='cover'></div> 
 
    <div class='title'>You and you</div> 
 
    <div class='artist'>101 Strings Orchestra</div> 
 
    <div class='clear'></div> 
 
    </div> 
 
    <div class='itemBox odd'> 
 
    <div class='title'>The Queen's lace hankerchief waltz</div> 
 
    <div class='artist'>101 Strings Orchestra</div> 
 
    <div class='clear'></div> 
 
    </div> 
 
    <div class='itemBox even'> 
 
    <div class='cover'></div> 
 
    <div class='title'>Voices of spring</div> 
 
    <div class='artist'>101 Strings Orchestra</div> 
 
    <div class='clear'></div> 
 
    </div> 
 
    <div class='itemBox odd'> 
 
    <div class='cover'></div> 
 
    <div class='title'>Roses from the south</div> 
 
    <div class='artist'>101 Strings Orchestra</div> 
 
    <div class='clear'></div> 
 
    </div> 
 
</div>

Answer 1

http://jsfiddle.net/PMRQ5/1/

vertical-align: top या vertical-align: bottom बॉक्स में जोड़े, आप क्या चाहते हैं पर निर्भर करता है।

Answer 2

.songlist .even { 
 
    background:#c2e4fa; 
 
    background:-moz-linear-gradient(top,#d9eefc,#c2e4fa); 
 
    margin-right:5px; 
 
} 
 
.songlist .odd { 
 
    background:#faf4c2; 
 
    background:-moz-linear-gradient(top,#fcf8d9,#faf4c2); 
 
    margin-right:5px; 
 
} 
 
.songlist .itemBox { 
 
    font-size:11px; 
 
    width:220px; 
 
    min-height:100px; 
 
    clear:both; 
 
    padding:5px; 
 
    margin:5px 10px 5px 10px; 
 
    display:inline-block; 
 
    position:relative; 
 
    border-radius:4px; 
 
    vertical-align: bottom; 
 
} 
 
.songlist .itemBox .title { 
 
    font-weight:bold; 
 
    font-size:16px; 
 
} 
 
.songlist .itemBox .artist { 
 
    clear:left; 
 
    font-size:11px; 
 
} 
 
.songlist .itemBox .titlerating { 
 
    bottom:10px; 
 
    left:10px; 
 
    position:absolute; 
 
} 
 
.songlist .itemBox .dance { 
 
    bottom:5px; 
 
    right:10px; 
 
    position:absolute; 
 
}

<div class='songlist'> 
 
    <div class='itemBox even'> 
 
     <div class='cover'></div>   
 
     <div class='title'>You and you</div> 
 
     <div class='artist'>101 Strings Orchestra</div>   
 
     <div class='clear'></div> 
 
    </div>      
 
    <div class='itemBox odd'>  
 
     <div class='title'>The Queen's lace hankerchief waltz</div> 
 
     <div class='artist'>101 Strings Orchestra</div>   
 
     <div class='clear'></div> 
 
    </div> 
 
    <div class='itemBox even'> 
 
     <div class='cover'></div>  
 
     <div class='title'>Voices of spring</div> 
 
     <div class='artist'>101 Strings Orchestra</div>  
 
     <div class='clear'></div> 
 
    </div>      
 
    <div class='itemBox odd'> 
 
     <div class='cover'></div>   
 
     <div class='title'>Roses from the south</div> 
 
     <div class='artist'>101 Strings Orchestra</div>  
 
    <div class='clear'></div> 
 
    </div> 
 
</div>