Question

我有一个包含许多缩略图的容器盒。我之前用拇指做了一个div，但那并不高效。我现在将所有差异拇指包含在标签中并将它们包含在同一个类中。

在类属性中我有：

.thumb-wrap {
    float: left;
    display: block;
    margin: 5px;
}

.thumb {
    padding: 4px;
}
.thumb-img {
    width: 100px;
    height: 75px;
    border: 1px solid #999;
    padding: 5px;
    background-image:url(slide-bg.jpg);
}

html是：

    <div class="thumb-wrap">
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>
        <a href="#" class="thumb" ><img src="img0-thumb0.jpg" class="thumb-img"/>   </a>

        </div>

然而，拇指出现在盒子的中心位置。我不想要那个。我希望他们保持一致。请帮忙。

Answer 1

如果你将它们包裹在div“thumb-wrap”中，你也不需要链接上的“thumb”类或图像上的“thumb-img”。

只需使用父关系：

.thumb-wrap {
    float: left;
    display: block;
    margin: 5px;

}

 .thumb-wrap a {
    padding: 4px;

}

 .thumb-wrap img {
    width: 100px;
    height: 75px;
    border: 1px solid #999;
    padding: 5px;
    background-image:url(slide-bg.jpg);

}

这样可以让您的HTML更清晰。

Answer 2

使用列表而不是使用div来包含你的拇指：

<ul class="thumbs">
   <li><a href="#"><img src="img0-thumb0.jpg" /></a>
   <li><a href="#"><img src="img1-thumb1.jpg" /></a>
   <li><a href="#"><img src="img2-thumb2.jpg" /></a>
   <li><a href="#"><img src="img3-thumb3.jpg" /></a>
</ul>

然后你不需要每个锚点和列表中每个图像的类，因为你可以像这样定位它们：

ul.thumbs li a {
   /* anchor styles here */
}
ul.thumbs li a img {
   /* image styles here */
}

Answer 3

抱歉，伙计们。这是愚蠢的。我体内有text-align: center;。

CSS显示属性参数

3 个答案: