Html 将div重新定位到另一个div的左侧，而不是下方

我正在尝试使用不同大小的

div

元素平铺网页。然而，我遇到了一个问题，有一次

x

个

div

元素填满了屏幕的宽度，下面的

div

被放置在前一行的下方，而不是浮动以适应前一行元素之间的空间。下面的代码更好地说明了我的意思；我希望将“游戏”

div

浮动到当前位置上方的空间中

h1{
颜色：白色；
}
.中心{
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}
.集装箱{
显示：内联块；
}
.违约{
边缘：1米；
浮动：左；
}
/*用于悬停文本*/
.悬停{
宽度：100%；
身高：100%；
位置：相对位置；
浮动：左；
}
.悬停(img h4){
颜色：白色；
}
.hover\u img：悬停img{
不透明度：.2；
}
.hover\u img:hover.center\u text{
显示：块；
}
.center_文本{
位置：绝对位置；
最高：50%；
左：0；
显示：无；
字体大小：粗体；
文本对齐：居中；
}
img{
保证金：0；
}
.水平矩形瓷砖{
高度：15公分；
宽度：35em；
}
瑞德先生{
背景色：rgba（255,63,63,0.8）；
}
#游戏，#游戏img{
宽度：30em；
高度：30公分；
}
#应用程序，#应用程序img{
宽度：40em；
高度：35em；
}

项目

为您的div类或id类创建样式

.className    
{display:inline;}

并在你的每个分区中使用它 希望这对你有帮助

这方面的一个例子

---

恐怕您要做的实际上是重新排列

div

以创建一个空间填充布局。就我所知，如果不是完全不可能的话，仅仅使用CSS是很困难的

我建议你看看，或者甚至是你想要的

---

但是，如果您不再自动重新订购容器，而是寻求一种解决方案，即弹性地调整每个容器的宽度以填充可用空间，同时保持其“顺序”（第一、第二、第三），我相信CSS将是一种可行的解决方案。如果您需要帮助，请使用搜索或重新询问。

您能否修改您的示例以更清楚地说明您当前遇到的问题？在

.container

的多宽处，它会出错？@OliverBaumann，根据我目前测试的966px宽度，它显示了问题，但我认为它永远不会正确显示。如果您展开代码段并运行它（或全屏运行），它应该显示发生了什么；我发现仅仅运行代码片段是不足以看到它的，因为所有元素最终都是堆叠的