css - 修复缩略图布局中的 Div 和图像高度问题

Question

我有缩略图 DIVS，它只是一张带有下面产品名称的图片。这是代码:

<div class="thumbs">
<a href="LINK"><img  src="IMAGE" /></a>
<div>Product Name</div>
</div>

CSS 如下:

.thumbs {
    float:left; width:210px; height:200px; text-align:center;
}

.thumbs div {
}

.thumbs img
{
    max-height: 115px;
    max-width: 100%;
}

最初我的图像高度为 115 像素，因此每一行都有相同高度的图像，并且下面的文本正确对齐。有些图像变得太宽，所以我不得不限制最大宽度。

问题:由于图像高度不同……缩略图下方的文本垂直位置不同。我希望文本跨行位于同一行。

示例页面: http://test.pillarsoflifebook.com/banquettes/designer-banquettes/*注意前 3 个缩略图高度相同..因此它们下面的名称对齐

有什么想法吗？

Answer 1

您可以通过将图像包裹在 div 中(或将 anchor 设置为 display: block)并设置 max-height 来解决此问题> 或 height，并将其设置为 overflow: hidden。

Here's a jsFiddle example这将强制缩略图 block 始终显示相同，无论图像大小如何。

编辑:Updated example with some of your images .

Edit2:要在 anchor 内垂直对齐图像，请将 anchor 的 line-height 设置为其高度(在本例中为 line-height: 115px; ), 并在 img 本身上设置 vertical-align: middle;。 Updated example including this fix here .