자바스크립트에서 나란히 있는 이미지를 얻는 방법

웹 디자인에서는 제품 디스플레이나 뉴스 보도 등에서 사진을 나란히 표시해야 하는 경우가 많습니다. 나란히 있는 사진을 얻는 방법은 무엇입니까? 다음은 JavaScript를 사용하여 병렬 이미지를 얻는 방법을 소개합니다.

1. Flexbox 레이아웃 사용

Flexbox는 요소를 쉽게 정렬하고 정렬할 수 있는 CSS3의 새로운 레이아웃 모드입니다. Flexbox 레이아웃을 사용하면 이미지를 쉽게 나란히 표시할 수 있습니다.

먼저 CSS에서 컨테이너를 설정하고 컨테이너의 표시 속성을 flex로 설정한 다음 나란히 표시해야 하는 이미지를 컨테이너에 래핑해야 합니다. 다음으로, 컨테이너 내 요소의 flex 속성을 설정하여 이미지의 크기와 위치를 조정할 수 있습니다.

모양은 다음과 같습니다.

HTML 코드:

<div>
  <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
  <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
  <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
</div>

CSS 코드:

.container {
  display: flex;
  justify-content: space-between;
}

2. CSS Float 속성 사용

CSS Float 속성을 사용하면 컨테이너의 왼쪽이나 오른쪽을 따라 요소를 띄울 수 있습니다. 다른 요소들이 그것을 둘러쌀 것입니다. 이 속성을 사용하면 이미지를 나란히 표시할 수 있습니다.

먼저 CSS에서 나란히 표시해야 하는 이미지의 float 속성을 설정하고 왼쪽 또는 오른쪽으로 설정해야 합니다. 다음으로 여백 속성을 사용하여 이미지 간격을 조정할 수 있습니다.

아래와 같습니다.

HTML 코드:

<div>
  <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
  <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
  <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
</div>

CSS 코드:

.container img {
  margin: 10px;
}

3. CSS 그리드 레이아웃 사용

CSS 그리드 레이아웃은 페이지를 행과 열로 나눌 수 있는 테이블 형식의 레이아웃 방법입니다. 더 유연합니다. CSS 그리드 레이아웃을 사용하면 이미지를 쉽게 나란히 표시할 수 있습니다.

먼저 CSS에서 컨테이너를 설정하고 컨테이너의 표시 속성을 그리드로 설정한 다음, Grid-template-columns 속성을 통해 이미지의 열 너비를 설정해야 합니다. 다음으로 표시해야 할 사진을 그리드에 나란히 넣고 사진의 위치와 크기를 조정할 수 있습니다.

다음과 같습니다:

HTML 코드:

<div>
  <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
  <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
  <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="자바스크립트에서 나란히 있는 이미지를 얻는 방법" >
</div>

CSS 코드:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container img {
  width: 100%;
  height: auto;
}

위 코드는 컨테이너를 세 개의 열로 나누고, 각 열의 너비는 동일하고 간격은 10px입니다. 이미지 너비는 100%로 설정되고 높이는 조정됩니다.

요약

위에서는 JavaScript를 사용하여 병렬 이미지를 얻는 세 가지 방법, 즉 Flexbox 레이아웃, CSS Float 속성 및 CSS Grid 레이아웃을 소개합니다. 이러한 각 방법에는 고유한 장점과 단점이 있으며 특정 요구에 따라 선택하고 사용할 수 있습니다. 어느 쪽이든 쉽게 이미지를 나란히 표시하여 웹 페이지를 더욱 아름답고 매력적으로 만들 수 있습니다.

위 내용은 자바스크립트에서 나란히 있는 이미지를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!