CSS 반응 형 이미지 기술 미스터리

Question

나는 반응이 빠른 이미지 기술을 사용하고 있었고, 혼란스러워하는 한 가지를 발견했습니다.

컨테이너 내부에 href 태그로 감싸 진 이미지가 있습니다. 컨테이너는 모든 것을 함께 보관할 수있는 웰, 컨테이너 역할을합니다. href 태그는 특정 크기가 정의 된 이미지 컨테이너로 사용됩니다. 이미지 width은 컨테이너에 맞게 100 %로 설정됩니다. 여기

코드입니다 :

The HTML: 
--------- 
<div class="img-conatiner"> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
    <a href="#" class="img-grid"> 
     <img src="http://placekitten.com/300/300" alt="kittens!"> 
    </a> 
</div> 

The CSS 
------- 
body { 
    width: 90%; 
    margin: 0 auto; 
    background: tomato; 
} 

.img-grid { 
    width: 20%; 
    float: left; <-- what is this for? 
    padding: 10px; 
    -webkit-box-sizing: border-box; 
} 

.img-grid img { 
    width: 100%; 
} 

예 : http://jsfiddle.net/TBVWG/2/이

여기 float없이 일이,이 기술은 이미지의 폭을 무시하고, 원래 크기로 불면 작동하지 않습니다 부모 컨테이너. 그러나 float은 모든 것을 함께 유지하는 방법은 무엇입니까?

미리 감사드립니다.

Answer 1

요소를 플로팅하면 자동으로 블록 요소가됩니다. Here's an article talking about implied blocks.

float가없는 경우 <a>은 너비를 설정할 수없는 범위로 표시되므로 <a>은 이미지의 실제 크기에 맞게 확장됩니다.

Answer 2

아마 너비 :이 문제를 일으키는 .img-grid img의 100 %. 이미지의 절대 너비/높이를 사용하십시오. 그런 다음 플로트를 제거 할 수 있습니다. float에 대한 유용한 정보는 다음에서 구할 수 있습니다. - http://css-tricks.com/all-about-floats/

Answer 3

기본적으로 a 태그의 너비를 설정할 수 없으므로 먼저 블록 요소로 지정해야합니다. display:block;에 .img-grid을 추가하면 문제가 해결됩니다. fiddle