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

Question

我有一个模板，其中显示了主图像及其下方的缩略图。每个产品可能有不同数量的缩略图，其中每个图像可能有不同的纵横比。

为了让缩略图看起来更漂亮，我缩放了所有的缩略图:

#product-thumbnail {
    height: 100px;
}

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

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

我尝试在我的描述 div 上使用 clear: both 但它没有用。

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

感谢您的帮助!

Answer 1

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

将 100 像素的高度移至图像本身，而不是包含的 div。

Updated fiddle