相同高度的内联块对齐

Question

我想对齐几个偶数个内联块，如下所示：

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

问题是：当任何块中有额外内容时，这些框未对齐。 请查看以下链接：

JS Fiddle link

我该如何解决这个问题？

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

Working Fiddle

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

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