我有一个包含许多缩略图的容器框。我早些时候用所有的拇指做了一个 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>
但是拇指出现在框的中心。我不想要那个。我希望它们保持对齐。请帮忙。
最佳答案
如果将它们包装在 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 更干净。
关于CSS 显示属性参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/875151/