我想要一个缩略图网格,我使用的只是divs(.thumb类),里面有一个img标记,但我读到一篇文章说,使用“new”图形标记更好(figcaption等)。我把div改成了figure并调整了css,但是我没有正确的反应,我想知道为什么?
对一组缩略图使用体形标记更好吗?
带有图的CSS,在它是一个.thumb类工作之前:
figure {
background: #eeeeee;
width: 25%;
float: left;
position: relative;
margin-bottom: 20px;
}
figure img {
display: block;
margin: 0;
width: 100%;
}
figure img:hover {
cursor: pointer;
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
带有图的HTML,以前是div.thumb类:
<div id="content">
<figure><img src="img/thumbnail_test.jpg"></figure>
<figure><img src="img/thumbnail_test.jpg"></figure>
<figure><img src="img/thumbnail_test.jpg"></figure>
<figure><img src="img/thumbnail_test.jpg"></figure>
<figure><img src="img/thumbnail_test.jpg"></figure>
<figure><img src="img/thumbnail_test.jpg"></figure>
<figure><img src="img/thumbnail_test.jpg"></figure>
<figure><img src="img/thumbnail_test.jpg"></figure>
</div>
最佳答案
这是因为默认情况下figure
有margin
(查看here了解更多信息),所以您必须重置margin
,下面是一个片段
figure {
background: #eeeeee;
width: 25%;
margin:0 0 20px 0;
float:left
}
figure img {
display: block;
margin: 0;
width: 100%;
}
figure img:hover {
cursor: pointer;
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
<div id="content">
<figure>
<img src="http://placehold.it/100" />
</figure>
<figure>
<img src="http://placehold.it/100" />
</figure>
<figure>
<img src="http://placehold.it/100" />
</figure>
<figure>
<img src="http://placehold.it/100" />
</figure>
<figure>
<img src="http://placehold.it/100" />
</figure>
<figure>
<img src="http://placehold.it/100" />
</figure>
<figure>
<img src="http://placehold.it/100" />
</figure>
<figure>
<img src="http://placehold.it/100" />
</figure>
</div>
关于html - 缩略图格使用数字标签还是div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27962570/