インラインブロックのミスアライメント（他の要素が押し下げられる）

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>