Html 使内联块元素的栅格响应调整大小

我目前正在以下网站上工作：

如您所见，我已经创建了div.project-item元素的列表。由于使用了内联块，因此在调整窗口大小时还可以减少列数。我现在想要完成的是，当调整窗口大小时，元素在一定范围内（在最小宽度和最大宽度之间）向上/向下缩放，直到达到最大/最小值，然后删除/创建列。现在的问题是，在移除一根柱子后，有一个巨大的空白。在这种情况下，最好还是显示3个较小的列，而不是2个较大的列

我已经尝试过使用flexbox，但它并没有真正起到作用，我还尝试过使用块元素而不是内联块，并将它们浮动到左侧。然后，调整大小的工作，但我也希望整个事情是中心的（像现在一样），这是我还没有找到一种方法来处理浮动元素

相关代码如下：

HTML:

---

您可以将

div.project-item

的宽度设置为%而不是固定宽度（px）

e、 g

因此，当您调整窗口大小时，它将进行调整

如果在某一点上你只想显示两个，你可以使用媒体

e、 g

我同意杨迪的观点

尝试将div.project-item宽度更改为40%（这适用于显示两个div的情况）。像这样：

div.project-item {
display: inline-block;
position: relative;

width: 40%;
height: auto;
margin: 10px;
overflow: hidden;
}

然后添加以下代码：

@media only screen and (min-width: 1347px) {
div.project-item {
    width:31%
}
}

@media only screen and (max-width: 926px) {
div.project-item {
    width:75%
}
}

所有宽度百分比都可以根据您的项目选择。

---

926px用于单分区，1347px用于三分区。

好的，速度很快，还没有想到使用媒体查询。谢谢，它工作得很好！我很高兴能帮助你。也谢谢你的回答，它现在工作得很好。

div.project-item{
    width: 30%;
}

@media (max-width: 920px){
    div.project-item{
        width: 45%;
    }
}

div.project-item {
display: inline-block;
position: relative;

width: 40%;
height: auto;
margin: 10px;
overflow: hidden;
}

@media only screen and (min-width: 1347px) {
div.project-item {
    width:31%
}
}

@media only screen and (max-width: 926px) {
div.project-item {
    width:75%
}
}