Question

我有一个模板，显示主图像和缩略图。每个产品可能具有不同数量的缩略图图像，其中每个图像可能具有不同的宽高比。

为了使缩略图看起来不错，我缩放了所有缩略图：

#product-thumbnail {
    height: 100px;
}

#product-thumbnail a img {
    height: 100%;
}

所有这些缩略图都在630px宽的容器中，如果我有多个缩略图，它们会被添加到与我的描述文本重叠的第二行。

我尝试使用clear：两者都在我的描述div上，但它没有用。

jsFiddle链接：http://jsfiddle.net/7eY3M/1/

感谢您的帮助！

Answer 1

〜EDIT〜

更好的方法是在div中使用高度为100px的单独潜水，每次使用float：left样式。在这种风格中，它会将图像保持在一条线上，同时允许它们“包裹”，而不是强制它们溢出。这应该解决所有问题。另请注意，USE显示：内联块;在你的     <div id="product-thumbnail">
如果不这样做会导致描述的奇怪位置，因为剂量使用显示：阻止或显示：内联。
CSS
    #product-thumbnail {
    display: inline-block;
    min-height: 100px;
    float:none;
    }
    .thumb
    {height=100px;<br>float:left;}

<div id="product-thumbnail"> <div class="thumb"> <img src=img1> </div> <div class="thumb"> <img src=img2> </div>

Answer 2

    #product-thumbnail {
        display: block;
    }

    #product-thumbnail a img {
        vertical-align: middle;
        height: 100px;
        margin: 5px;
        box-shadow: 10px 10px 20px #909090;
        -webkit-box-shadow: 10px 10px 20px #909090;
        -moz-box-shadow: 10px 10px 20px #909090;
    }

将100px高度移动到图像本身，而不是包含div。

Updated fiddle

需要修复CSS，以便DIV不会重叠

2 个答案: