그림 태그 또는 div의 축소판 그리드 사용?

Question

저는 미리보기 격자를 원하고 img 태그 내부에서 divs (.thumb 클래스)를 사용하고 있었지만 "새로운"그림 태그를 사용하는 것이 더 낫다는 기사를 읽었습니다 (figcaption 등). 내 divs 그림으로 변경하고 CSS를 조정,하지만 난 제대로 반응하지 않고 왜 궁금 해서요?

어쨌든 썸네일 세트에 그림 태그를 사용하고 있습니까? 그것은 .thumb 클래스 작업 전에

그림과 CSS는 : 그림과

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 클래스이었다 figure이 있기 때문에

<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> 

Answer 1

때문이다 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>