图像之间的空间随着浏览器缩小而增长

Question

我有一些图像随着浏览器的大小而变小。 它对我来说效果很好，但是随着图像变小，它们之间的空间会变大。 当浏览器最小时，图片之间的空间就是图片的大小。

如果您将浏览器的大小慢慢调整到最小，您会看到媒体查询启动并明白我的意思。

我已经尝试了很多东西，但我却迷失了方向。

我试过在小提琴中复制它，但它只需要我的大部分代码即可，所以我只能提供指向页面http://www.techagesite.com/page-1work1112211.htm的链接

.top_grow{

        display:inline-block;
        vertical-align:top;
        font-size:0;
        margin:0 auto;
        overflow:hidden;
         white-space:nowrap;
    }


.cats {width:100%;
height:100%;
display:block;
font-size:0;
}

               .text{
        font-size:11px;
        letter-spacing:1px;
        word-spacing:1px;
    }



        <div class="top_grow">
            <a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
                <img class="cats" src="http://freephonewallpapersformobile.files.wordpress.com/2014/05/super-mario-galaxy-hd-desktop-background_small1.jpg"></img>
                <div class="text">
                    Mario Galaxy
                </div>
            </a>
        </div>

Answer 1

您的图像看起来好像是用空格字符隔开的。空格字符没有可变宽度。

解决方案是使用浮点数。

类似

.holder {
    width: 100%;
}

.img-holder {
    float: left;
    margin-right: 3%;
    width: 22%;
    height: 100px;
    background-color: #ccc;
}

img {
    width: 100%;
    height: auto;
}

 <div class="holder">
     <div class="img-holder"><img src="#" /></div>
     <div class="img-holder"><img src="#" /></div>
     <div class="img-holder"><img src="#" /></div>
     <div class="img-holder"><img src="#" /></div>
 </div>

这将为您提供四列具有可变宽度装订线的图像。

您需要更改它以适合您自己的目的，但我希望这会让您朝着正确的方向前进。

首先在新文件中尝试，然后将您学到的知识应用到您的特定问题上，这应该可以正常工作。