하나의 수평선에 배치해야하는 이미지 배열 (스크롤 포함)

Question

방금 ​​포트폴리오 웹 사이트를 디자인했습니다. 나는 한 줄로 (가로 스크롤과 함께) 유지하고 싶은 이미지들을 가지고있다. 이것은 주변 div (이 경우 클래스 '.post-images')의 고정 너비를 설정했을 때만 발생하며 모든 이미지를 포함 할만큼 충분히 넓습니다. 이미지의 양과 너비가 동적이지 않은 경우에 이것은 괜찮을 수 있습니다. 불행히도 이것은 여기에 해당하지 않습니다. 이 div가 모든 이미지 주위를 감싸고 떠 다니게하지 않기를 바랍니다. 나는 각 이미지를 ('. post-image')에 'white-space : nowrap'에 아무 것도 쓸 수 없도록 div를 설정하려고 시도했다. Link

가 어떻게이 문제를 해결할 수 있습니다

여기에 예를 참조하십시오? 나는 누군가가 나에게 여기에 손을 기꺼이 희망, 함께 .post_images에 대한 CSS와 .post_image 교체)

감사합니다,

제론

Answer 1

를 : 효과적으로

.post_images { white-space:nowrap; } 
.post_image { display:inline; } 

을,이 포장한다 <div class="post_image"> 요소가 중복되었습니다 (즉, display:inline). 당신은 그들을 제거 할 수도 있습니다.

일반적으로 대부분의 요소는 컨테이너의 크기에 따라 너비가 조정됩니다. 콘텐츠에 따라 요소의 크기를 변경하려면 <table>, display: table 또는 단일 행이 필요합니다.

편집 : 모두 white-space:nowrap 및 display:inline 년 동안 모든 주요 브라우저에서 지원 한 (IE에서 다시 IE 5.5에있는 모든 방법).