1

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

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

问题是：当任何块中有额外的内容时，框就会错位。请检查以下链接：

JS小提琴链接

我该如何解决这个问题？

4

4 回答 4

12

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

工作小提琴

于 2013-09-17T14:21:28.507 回答
1

用于vertical-align: top;内联块元素 - http://jsfiddle.net/5JSAG/49/

于 2013-09-17T14:21:48.470 回答
0

我建议使用绝对定位将您的 .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;
}
于 2013-09-17T14:35:49.573 回答
0

尝试这个：

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

演示 JSFIDDLE

于 2013-09-17T14:22:11.580 回答