如何使用HTML / CSS创建具有相同宽度和不同高度的照相馆？

Question

我是HTML和CSS的初学者。 我想创建一个图片库，其中所有列的宽度相同，但是每张照片的高度都可以不同。 但是我希望所有照片彼此“拥抱”，以便第二行中的照片可能不会以彼此相同的垂直位置开始。 我该怎么做？ 刚刚看到有关列的内容-也许行得通吗？ 感谢您提供的任何帮助！

Answer 1

您可以创建一个HTML页面，其中每一列都包含div 。

然后，您可以使用CSS样式表将各列放在一起：-将所有这些列div浮动到左侧（请参阅W3C学校的CSS float），或者-使用relative或absolute position （请参阅W3C学校的CSS定位 ），并且给每个div一个X和Y坐标。

然后为每个列div一个预设宽度（请参阅W3C学校的CSS width和max-width ）。

然后，列中的每个项目都会移动到新行（当它具有静态定位时，这是大多数标签的默认设置）。 因此，只要给该列中的每个图像加上相同的固定前缀，就可以了……