어떻게 만들지: 수평 스크롤을 가진 이미지 라이브러리

CSS를 사용하여 수평 스크롤을 가진 이미지 라이브러리를 배우세요.

수평 스크롤을 가진 이미지 라이브러리

수평 스크롤을 사용하여 다른 이미지를 확인하세요:

우한 베이징 셴진 하쿵 상해

직접 시도해 보세요

수평 스크롤을 가진 이미지 라이브러리를 만들기

第一步 - HTML 추가하기:

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Forest">
  <img src="img_lights.jpg" alt="Northern Lights">
  <img src="img_mountains.jpg" alt="Mountains">
</div>

第二步 - CSS 추가하기:

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}
div.scroll-container img {
  padding: 10px;
}

직접 시도해 보세요

관련 페이지

教程:HTML 이미지

教程:CSS 이미지 스타일 설정