html - 同じ高さのインライン ブロックの配置

Question

以下のように、偶数個のインライン ブロックを配置したいと考えています。

        _____   _____   _____   _____         
       |     | |     | |     | |     |     
       |  1  | |  2  | |  3  | |  4  |
       |_____| |_____| |_____| |_____|
                _____   _____    
               |     | |     |
               |  5  | |  6  |
               |_____| |_____|

問題は、ブロックのいずれかに余分なコンテンツがある場合、ボックスの位置がずれることです。以下のリンクを確認してください。

JS フィドル リンク

どうすればこれを解決できますか?

Answer 1

vertical-align: top CSS コードに追加します。

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:60px;
    padding-top:40px;
    border:1px solid red;
    vertical-align: top; /* added */
}

働くフィドル

Answer 2

vertical-align: top;インラインブロック要素に使用- http://jsfiddle.net/5JSAG/49/

Answer 3

これを試して：

.entry 
{ 
display:inline-block;
margin-top:10px;
width:100px;
height:60px;
padding-top:40px;
border:1px solid red;
vertical-align: top;
}

デモ JSFIDDLE

Answer 4

絶対配置を使用して、.entry div をドキュメント フローから切り離すことをお勧めします。

http://jsfiddle.net/TQW3D/1/

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:100px;
    border:1px solid red;
    position:relative;
}

.entry span
{
    position: absolute;
    top:40%;
    left:0;
    width:100%;
    text-align:center;
}