0

我一直在使用一些响应式图像技术，遇到了一件让我感到困惑的事情。

我有一个包装在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将所有东西放在一起？

提前致谢。

4

3 回答 3

2

浮动元素会自动使其成为块元素。 这是一篇关于隐含块的文章。

如果您没有浮动<a>，则显示为无法设置宽度的跨度，因此<a>扩展以适合内部图像的实际大小。

于 2013-10-24T05:43:01.533 回答
0

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

于 2013-10-24T06:43:25.093 回答
0

可能 width:100% of .img-grid img 导致了这个问题。尝试使用图像的绝对宽度/高度。然后你可以删除浮动。一篇关于浮动的好文章可在 - http://css-tricks.com/all-about-floats/

于 2013-10-24T05:51:35.963 回答