使用 CSS 为 Squarespace 网站完全控制图像的位置

问题描述

我正在尝试移动 3 个图像，使它们排成一行并且彼此之间的距离相同。 这是网站。

https://www.leonardwarren.net/personal-training

我需要底部的 3 个图像彼此之间具有大致相同大小的白色间隙。

为了创建这些图像，我使用了自定义 CSS 来制作鼠标悬停效果。

我在每个图像的代码块中使用了这段代码：

<div class="image-swap">
  <img src="image">
  <img src="imageonhover">
</div>

该代码将图像堆叠在一起。

然后我为悬停效果制作了这段代码

如果您访问该网站，您会看到间距已关闭。

解决方法

间距已关闭，因为您的图像具有不同的宽度。尝试为所有这些设置相同的宽度，应该可以解决问题。

我会使用这样的东西：

.content-wrapper img {
width: 100em;
height: 20em;

}