サイズが小さいがサイズの異なる多数のdivボックスの整列/整列

Question

小さなdiv内に含まれる単語のタグクラウド風の表示を作成して、各行に多くのものが表示されるようにします。しかし、私はdiv要素のいくつかでフォントサイズを変更起動した場合、ライン構造を砕きますと巨大なギャップは、このスクリーンショットのように、表示されます。

誰もがこれを解決する方法上の任意のアドバイスを提供することができます？私は大きいものの横に小さなタグの複数の行を持つような、気の利いた何かをするつもりはありません。私はdivが普通の見た目の線の構造に従うことを望みます。ここで

はreleventのCSSです：

div.example { 
background-color: #8C7D80; 
padding: 2px; 
margin: 2px; 
float: left; 
color: #96888B; 
text-align: center; 
position: relative; 
} 

Answer 1

は、行の高さを増額してください。 大括弧も大きすぎるように見えます。

div.example { 
    // other stuff here 
    line-height: 1.5 
} 

固定線高を設定できますか？

Answer 2

高さを明示的に設定したり、線の高さのプロパティを変更することをお勧めします。

div.example { 
    background-color: #8C7D80; 
    padding: 2px; 
    margin: 2px; 
    float: left; 
    line-height: 25px; 
    height: 25px; 
    color: #96888B; 
    text-align: center; 
    position: relative; 
}