Squarespace 사이트용 CSS로 이미지의 위치를 완벽하게 제어 (Fully Control The Location of an Image with CSS for Squarespace site)

문제 설명

3개의 이미지가 정렬되고 서로 같은 거리에 있도록 이동하려고 합니다. 여기 사이트가 있습니다.

하단 3개의 이미지 사이에 거의 같은 크기의 흰색 간격이 있어야 합니다.

이 이미지를 만들기 위해 Custom CSS를 사용하여 마우스를 만들었습니다. 호버 효과.

각 이미지의 코드 블록에서 이 코드를 사용했습니다.

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

이 코드는 이미지를 서로의 위에 쌓습니다.

그런 다음 호버 효과를 위해 이 코드를 만들었습니다.

웹사이트로 이동하면 간격이 꺼진 것을 볼 수 있습니다.

The spacing is off because your images have different widths. Try to set the thesame widths for all of them, it should solve the problem.

I would use something like this:

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

}