div 컨테이너의 이미지가 다음 행으로 이동하는 대신 넘칠 수 있습니다.

Question

나는 최대 너비와 너비가 overflow: auto 인 컨테이너가 있습니다. 컨테이너에는 이미지가 있습니다. 여백을 제거하기 위해 모든 항목을 한 줄에 배치하여 수평 여백을 제거하고 float: left을 추가하여 수직 여백을 제거했습니다.

문제는 모든 이미지가 단일 행에 있더라도 다른 이미지를 배치 할 공간이 없으면 오버플로가 아닌 가로 스크롤 막대를 추가하는 대신 이미지가 다음 행으로 이동한다는 것입니다. 행 수가 너무 많으면 세로 스크롤 막대가 나타납니다.

강제로 이미지를 한 줄에 배치하고 내가 지정한 다음 이미지로 이동하는 방법은 무엇입니까?

Answer 1

최근에이 문제가 발생했습니다. 콘텐츠의 측면 스크롤 오버 플로우를 위해 CSS에서 이러한 속성/속성 쌍을 정의해야한다고 생각합니다. 여기에 텍스트를 사용하는 예는,의는 도움이되기를 바랍니다 :

.item-class {  
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
    margin: 0, 10px, 0, 10px; 
 
}

<div class="item-class"> 
 
    <img src="https://static.pexels.com/photos/700447/pexels-photo-700447.jpeg" alt="Num1" height="300" width="300"> 
 
    <img src="https://static.pexels.com/photos/700448/pexels-photo-700448.jpeg" alt="Num2" height="300" width="300"> 
 
    <img src="https://static.pexels.com/photos/700450/pexels-photo-700450.jpeg" alt="Num3" height="300" width="400"> 
 
    <img src="https://static.pexels.com/photos/700420/pexels-photo-700420.jpeg" alt="Num4" height="300" width="500"> 
 
</div>

편집 :이 사업부에 포함, 그것은 또한 이미지와 함께 작동하는 것을 보여주기 위해 예제 사진을 사용

Answer 2

당신이해야 "파라미터 nowrap"

<div id="ImageContainer" style="height:300px; white-space: nowrap;"> 
 
    <!-- I only adjusted the img sizes to fit this example. 
 
     --> 
 
     <img src="https://static.pexels.com/photos/700447/pexels-photo-700447.jpeg" alt="Num1" height="300" width="300"> 
 
     <img src="https://static.pexels.com/photos/700448/pexels-photo-700448.jpeg" alt="Num2" height="300" width="300"> 
 
     <img src="https://static.pexels.com/photos/700450/pexels-photo-700450.jpeg" alt="Num3" height="300" width="400"> 
 
     <img src="https://static.pexels.com/photos/700420/pexels-photo-700420.jpeg" alt="Num4" height="300" width="500"> 
 

 
    </div>

로 공백 속성을 다른 사업부에 이미지를 넣어 지정

`