Css 如何防止这个4x2网格溢出到下一行？

在我的作业中，我应该制作一个4x2的网格，该网格由一个容器宽度限制：66%，并向右浮动

我已经做到了，但是如果我以某种方式调整它的大小，单元格将流向下一行。我希望它保持在同一行，并被包含行的div所包含

我的代码：

.container{
宽度：66%；
高度：自动；
边框：5px纯蓝色；
浮动：对；
文本对齐：居中；
}
.浮箱{
浮动：左；
宽度：23%；
身高：99%；
保证金：5px；
边框：1px实心#B3；
}
.浮箱2{
浮动：左；
宽度：21%；
身高：99%；
保证金：5px；
边框：1px实心#B3；
}
img{
宽度：100%；
高度：自动；
}
#第1行{
宽度：99%；
高度：195px；
}
#第2行{
宽度：99%；
高度：200px；
}

---

您好，您的问题是：

行1宽度

=395.297

div.floating-box

=23%=90.906px+2px+10px=102.9px 102.9px*4=411.6px

411.6>395.297px，因此下降。 您可以通过删除边距和边框或减小浮动框的大小来修复它

编辑：

---

当然，对于大屏幕，它可以正常工作，因为您有8%的储备，但对于小屏幕，这是不够的。您还可以通过媒体查询删除小屏幕上的空白

代码笔在哪里？查看HTML并修复所有错误关闭的

、

和

标记。然后查看是否仍然存在问题。由于您使用的是浮动，内容将换行，因为没有足够的空间。您需要使用overflow-x附加包装行div以保持大小，或者需要使用相对单位设置子div的大小以避开视口宽度。