Question

我遇到的问题是行数会影响框位置。我拥有的行越多，显示的就越糟糕。

HTML我正在使用

<div class="block">
    <img alt="*" src="http://placekitten.com/200/300" alt="*" />
    <h2>Nameasdasd asd asdf wsd fgW</h2>    
</div>

和CSS

.block
{
    width: 120px;
    height: 150px;
    display: inline-block;
    border-radius: 10px;
    margin: 13px 13px 0 0;
    text-align: center;
    padding: 5px;
    position: relative;
    behavior: url(/Media/PIE.htc);
    cursor: pointer;
    background: #f00;
}

.block img { height: 70px; width: 70px; display: block; margin: 0 auto 10px auto; }
.block h2 { font-size: 12px; padding: 0; margin: 0; font-family: 'Arial'; }

小提琴：http://jsfiddle.net/3GVTK/2/

我之前从未遇到过这个问题。

编辑：感谢您的所有回复和解决方案！所有这些都是有效的并且有效（截至目前）。我会坚持使用Blazemongers解决方案，因为它对当前布局没有任何副作用。

Answer 1

将vertical-align: top;添加到.block元素的CSS中。

http://jsfiddle.net/mblase75/tsRKG/

如果您在宽屏幕中查看小提琴的块，您可能会注意到它们与最后一行文本对齐。这就是baseline的含义，即default vertical alignment。

Answer 2

只需将以下属性添加到.block css类

即可

float: left;

点击此处http://jsfiddle.net/3GVTK/4/

Answer 3

删除display:inline-block;并添加float:left;

fiddle

Answer 4

只需将display:inline-table添加到您的css中的block h2

像

.block h2 { font-size: 12px; padding: 0; margin: 0; font-family: 'Arial'; display:inline-table }

你需要确保小猫的名字不会过长

行数影响框位置

4 个答案: