이미지가있는 CSS 오버플로 컨테이너가 작동하지 않습니까?

Question

저는 CSS에 익숙하지 않은 자바 스크립트/PHP 프로그래머로서 오버플로가있는 컨테이너에 이미지를 표시하는 데 어려움을 겪고 있습니다. 내 이해는 아래 코드는 그들 사이에 15 픽셀의 공간을 가진 세 행의 이미지를 표시해야합니다. 대신 div가 있어야하는 위치의 왼쪽 상단에 하나의 단일 이미지를 표시합니다. div의 ID를 제거하면 이미지가 세로선 아래로 표시되고 div를 완전히 제거하면 페이지를 가로 질러 오른쪽으로 흐릅니다. div에 배경색을 주었을 때 적절한 크기와 올바른 위치에있는 것처럼 보였습니다. 나는 또한 용기를주는 시도

#items_container { 
    position:absolute; 
    overflow:auto; 
    height:500px; 
    width:500px; 
} 
.item_image { 
    margin: 0 15px 15px 0; 
    padding: 0 0 0 0; 
} 

<div id="items_container"> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
</div> 

는 HTML의 높이/폭, 이미지 클래스는 CSS의 높이/너비를 div에. 나도 아무것도하지 않았다. 어떤 도움을 주셔서 감사합니다 모두들!

Answer 1

나는 완전히 질문을 이해하지만, 이것은 내가 당신의 구조 레이아웃 것 어떻게하지 :

http://jsfiddle.net/mDXL2/

HTML

<div id="items_container"> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
    <img src="imageLocation" height="150" width="150" class="item_image" /> 
</div> 

CSS

#items_container { 
    overflow:hidden; 
    height:500px; 
    width:500px; 
} 
.item_image { 
    float:left; 
    margin: 0 15px 15px 0; 
    padding: 0 0 0 0; 
} 

를

오버 플로우 숨김은 투명으로 바꿀 수 있지만 오버 플로우 숨겨진 경로를 선호합니다.

그 후에는 모든 .item_image 요소를 플로팅해야합니다.