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

如果你没有浮动<a>显示为你无法设置宽度的范围，那么<a>会扩展以适应里面图像的实际大小。 / p>

Answer 2

可能是宽度：导致此问题的.img-grid img的100％。尝试使用图像的绝对宽度/高度。你可以删除浮动。有关浮动的好文章可在 - http://css-tricks.com/all-about-floats/

找到

Answer 3

默认情况下，您无法设置a-tag的宽度，必须先将其设置为块元素。将display:block;添加到.img-grid，它将解决您的问题。 fiddle

CSS响应图像技术之谜

3 个答案: