图像布局问题的CSS

我正在学习响应式CSS，所以这对我来说是全新的。然而，为什么第二排的图片没有与最上面的图片相拥

理想情况下，我只希望每行4个图像，但如果在较小的屏幕或手机等上，它将动态减少图像大小，并减少每行图像的数量。似乎无法让它工作？感谢您的帮助！所有与图像相关的CSS都位于该静态页面上

div.gallery{
边框：1px实心#ccc；
}
部门画廊：悬停{
边框：1px实心#777；
}
美术馆副馆长{
宽度：100%；
高度：自动；
}
分区描述{
填充：10px；
文本对齐：居中；
}
* {
框大小：边框框；
}
.反应迅速{
填充：0 6px；
浮动：对；
宽度：24.99999%；
}
@仅介质屏幕和（最大宽度：700px）{
.反应迅速{
宽度：49.99999%；
利润率：6px0；
}
}
@仅介质屏幕和（最大宽度：500px）{
.反应迅速{
宽度：100%；
}
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}

阿尔加维婚礼策划人
阿尔加维音乐DJ

在.responsive类中使用height，而不是float right使用float left。见下面的例子。我使用高度290px，您可以根据需要使用

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
  height: 290px;
} 

此外，您还可以在响应断点中使用边距底部，使其看起来很好。见下面的例子

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0 30px 0; 
  }
}

---

请擦鞋你的代码对不起，最初的粘贴没有通过，我正在编辑你的评论！