无法格式化图片库 CSS

问题描述

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

我是自学的，所以可能会有一些非常明显和基本的错误，但任何识别和解释的帮助将不胜感激。

谢谢！

gallery css

gallery html

resulting disaster

解决方法

您可以使用 flexbox 代替浮动来对齐图像。 尝试将类名.Gallery 的元素的浮动属性替换为：

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

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

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