CSS响应图像技术之谜

我一直在摆弄一些反应灵敏的图像技术，遇到了一件让我困惑的事情

我有一个图像包装在容器内的

href

标签中。这个容器就像一口井，把所有东西都装在一起。

href

标记用作定义了特定大小的图像容器。然后将图像

宽度设置为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%;
}

HTML：
---------
CSS
-------
身体{
宽度：90%；
保证金：0自动；
背景：番茄；
}
.img网格{
宽度：20%；
浮动：左；浮动元素会自动使其成为块元素。

如果没有浮点值，
将显示为一个无法设置宽度的范围，因此
将扩展以适合内部图像的实际大小。
可能宽度：100%的.img网格img导致此问题。尝试使用图像的绝对宽度/高度。然后可以删除浮点值。有关浮点值的好文章可在-
默认情况下，不能设置a标记的宽度，必须先将其设置为块元素。
将
display:block；
添加到
.img grid
中，它将解决您的问题。
您提供的链接解释了一切。谢谢！