오버플로가 충분히 흐르지 않음

Question

고정 된 크기의 div 내에 들어가야하는 스타일이 지정된 이미지로 구성된 코드가 있습니다. 그렇지 않으면 넘어져야합니다. 그러나 맞지 않는 떠 다니는 요소는 다른 요소와 닿아서야 그림자처럼 흐르게됩니다.

이는 예시하여 설명하는 것이 가장 : 완전히 사라지거나 가시광 영역에서 이동하는 위치를 더욱 아래로 이동한다 http://jsfiddle.net/wjw83/10/

제 7 화상 (거의 보이지 참조). 누구든지이 일을 도와 줄 수 있습니까?

감사합니다.

편집

아이디어에서 그리고 성난의 가장자리에이기 때문에, 나는 붙여 넣기 임의의 속성을 시작했고 결국 성공했습니다.

는 해결 : http://jsfiddle.net/wjw83/13/

I가 한 모든 추가했다 "마진 - 하단 : 20 픽셀을;" 이미지 클래스에. 그림자와 같은 값이므로 클리핑 된 요소를 완전히 제거하는 동안 그림자가 그대로 유지됩니다. 와우!

Answer 1

아이디어에서 그리고 성난의 가장자리에이어서, 나는 붙여 넣기 임의의 속성을 시작했고 결국 성공했습니다.

는 해결 : http://jsfiddle.net/wjw83/13/

I가 한 모든 추가했다 "마진 - 하단 : 20 픽셀을;" 이미지 클래스에. 그림자와 같은 값이므로 클리핑 된 요소를 완전히 제거하는 동안 그림자가 그대로 유지됩니다. 와우!

Answer 2

.main{ 
    padding-top: 15px; 
    width: 870px; 
    height: 140px; /* Reduced height */ 
    overflow:hidden; 
} 

라이브 데모 : Fiddle