Html 调整窗口大小时减少边距

我试图使我的网站的一部分响应，但我遇到了一个问题，我似乎无法解决

每行有3个矩形内联块div，右边距为100px，在一个动态添加的包装器中。当我把我的窗户变小的时候，第三个div就不再适合这一排了，按预期被压了下去

但我想要实现的是，右边的边距变小，直到在div之间的20px，然后第三个div被推到第二行，边距再次变大，直到它不再适合，然后第二个div移动到第二行，第三个div移动到第三行，依此类推

Html:

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.box{
    width:100px;
    height:150px;
    background-color:red;
    display:inline-block;
    margin-right:96px;
}
.box:nth-child(3n+3) { 
    margin-right: 0px; 
}
#wrapper{
    height:500px;
    width:500px;
    background-color: #eee;
}    

这是我的小提琴：

以下是一些更清晰的图片：

是这样开始的：

调整大小时，中间的空间变小

当它不再合适时，它会变成每行2个div

---

您应该能够通过媒体查询实现这一点。您可以在css中为某些断点设置这些断点

例如：

@media (max-width: 768px) {
    .box {
        width: 50px;
    }
}

因此，当浏览器或设备的宽度小于或等于

768px

时，

.box

的宽度将为

50px

。但是，在执行此操作时，还需要将

100px

宽度添加到较大的媒体查询中（否则媒体查询将被覆盖）。因此，当浏览器或设备大于

768px

时，它将采用

100px

宽度

因此，您可以从全局

.box

中删除width属性，执行以下操作：

@media (min-width: 769px) {
    .box {
        width: 100px;
    }
}
.box{
    display: block;
    height:150px;
    background-color: red;
    margin: 0 48px 0 48px;
}

当然，这是编写媒体查询的最简单方法。对于特定的宽度设置，甚至是特定于设备的设置，有很多例子

---

您应该使用

xy%

而不是

xy-px

---

利润率：5%5%5%5%

将使用网站左右宽度的5%和网站高度的5%。通过这种方式，它不需要使用

@媒体屏幕和（最大宽度：xy px）

就可以使用媒体规则来实现这一目的，或者更好地使用像bootstraplip这样的前端框架：？@mwl是的，诸如此类！谢谢，我不想更改.box的宽度，但是通过@birdmand的flex box和您的媒体查询，我可能会让它工作。谢谢哦，对不起，我只是以宽度为例。你可以添加任何你想添加的内容。祝你好运那真的需要更多的解释。对不起，我昨天有点匆忙<代码>保证金：5%5%5%5%将使用网站左右宽度的5%和网站高度的5%。这样，它在不使用

@媒体屏幕和（最大宽度：xy px）

的情况下具有响应性。实际上，定义为百分比的顶部和底部边距也将表示包含块的宽度。