Html 窗口变小时Div不内联？

我有一个小问题与几个div。我已经设置了5个不同颜色的div，当窗口缩小时，div会一个接一个地掉下来。我有没有办法让它们之间的距离缩小，这样它们就更近了

再次感谢各位

p{
保证金：0；
}
.PAGECOLOON{
边框：2个实心#e1dfe1；
边界半径：5px；
背景色：#fff；
宽度：100%；
高度：155px；
边缘顶部：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.pageColourOff{
显示：无；
}
#页码{
背景色：#f5f0f5；
边框底部：2个实心#e1dfe1；
}
#页码p{
填充顶部：15px；
垫底：15px；
左侧填充：15px；
颜色：#5656；
字体大小：粗体；
}
.bg01Off{
背景色：#80b3ff；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.bg02Off{
背景色：#afe9af；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.bg03Off{
背景色：#ffb380；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.bg04Off{
背景色：#ffaaa；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.bg05Off{
背景色：#eeaaff；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.中心{
文本对齐：居中；
}

颜色

添加一个媒体查询，这样在屏幕达到一定宽度后，元素将得到一个边距底部，即一个百分比，而不是px

使用媒体查询使元素随着视口宽度的变化而响应，例如：

body {
background-color: lightgreen;
     }

@media only screen and (max-width: 500px) {
body {
    background-color: lightblue;
    }
}

当视口的宽度低于500像素时，这将使背景颜色发生变化。您可以在div的宽度上使用相同的概念

---

**另外，请查看引导。Bootstrap使使用网格系统定义元素的宽度变得容易。您正试图使您的站点“响应”，这在web开发中是一个众所周知的概念。Bootstrap已经为这个问题创建了一个库。它使用媒体查询来实现这一点。深入理解媒体查询是值得的，但要想快速解决问题，需要研究引导

您可以在媒体查询中加入一条规则，以减少页边距，如我的示例（最后一条规则）：

p{
保证金：0；
}
.PAGECOLOON{
边框：2个实心#e1dfe1；
边界半径：5px；
背景色：#fff；
宽度：100%；
高度：155px；
边缘顶部：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.pageColourOff{
显示：无；
}
#页码{
背景色：#f5f0f5；
边框底部：2个实心#e1dfe1；
}
#页码p{
填充顶部：15px；
垫底：15px；
左侧填充：15px；
颜色：#5656；
字体大小：粗体；
}
.bg01Off{
背景色：#80b3ff；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.bg02Off{
背景色：#afe9af；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.bg03Off{
背景色：#ffb380；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.bg04Off{
背景色：#ffaaa；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.bg05Off{
背景色：#eeaaff；
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
左缘：4%；
保证金权利：4%；
显示：内联块；
}
.中心{
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：760像素）{
.bg01Off，
.bg02Off，
.bg03Off，
.bg04Off，
.bg05Off{
左缘：1%；
保证金权利：1%；
}

颜色

您可以使用表格而不是

.center

div，并为其提供以下样式：

table {
  width: 100%;
  text-align: center;
}
td {
  width: 20%; /* This is 100/the number of <td>'s you have in the table. */
}

颜色

将容器

中心

更改为具有以下属性的flexbox：

.center {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 4%
}

p{
保证金：0；
}
.PAGECOLOON{
边框：2个实心#e1dfe1；
边界半径：5px；
背景色：#fff；
宽度：100%；
高度：155px；
边缘顶部：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.pageColourOff{
显示：无；
}
#页码{
背景色：#f5f0f5；
边框底部：2个实心#e1dfe1；
}
#页码p{
填充顶部：15px；
垫底：15px；
左侧填充：15px；
颜色：#5656；
字体大小：粗体；
}
布格夫先生{
宽度：80px；
高度：80px；
边框：3px实心#666；
边界半径：20px；
边缘顶部：10px；
边缘底部：10px；
显示：内联块；
}
.bg01Off{
背景色：#80b3ff；
}
.bg02Off{
背景色：#afe9af；