格式化图片库 CSS 时出现问题

Question

我正在尝试构建一个非常简单的图片库，但是，当我添加其他图片时，它会破坏页面上的布局。我附上了问题的html、css和图片。

我是自学成才，因此可能存在一些非常明显和基本的错误，但我们将不胜感激任何识别和解释的帮助。

谢谢！

gallery css

gallery html

resulting disaster

Answer 1

您可以使用 flexbox 进行图像对齐而不是浮动。 尝试将类名.Gallery 的元素的 float 属性替换为：

.Gallery {
   display: flex;
   flex-wrap: wrap;
}

在这里你可以找到 flexbox 的基本概念。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox