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>

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

你需要改变它以适合你自己的目的，但我希望这会把你带到正确的方向。

首先在新文件中试用，然后将您学到的内容应用于您的具体问题，这应该可以正常工作。

浏览器收缩后图像之间的空间增大

1 个答案: