내용을 더 많은 줄로 확장하는 CSS div

검색 기준에 따라 표시되는 작은 이미지 (지문과 같은) 목록을 반환하는 PHP 스크립트가 있습니다.내용을 더 많은 줄로 확장하는 CSS div

나는이 이미지가 화면에서 약 45 %에 도달 할 때까지이 이미지를 표시하고 공간에 맞을 이미지보다 더 많은 이미지가있는 경우 이미지를 새 라인으로 계속 보냅니다.

div에서 div를 설정하기 위해 CSS를 사용했습니다.

.example { 
    Float: left; 
    Width: 45%; 
    }

그러나 이미지는 45 %를 초과하여 계속됩니다. 스타일 오버랩을 사용한 경우 : 스크롤; 또는 겹침 : 숨김, 이미지는 45 %에서 멈추고 다른 하나를 보려면 스크롤하거나 숨겨집니다.

어떻게 이미지를 새로운 '선'으로 계속 만들 수 있습니까?

나는 랩을 시도했지만 성공하지 못했습니다.

도움 주셔서 감사합니다.

2013-07-23 BEN HALL

이미지를 생성하는 PHP 루프를 보여줄 수 있습니까? 또한 귀하의 CSS에서 선언을 위해 모든 소문자를 사용하십시오. 예를 들어'width'가 아닌'Width' – Vector

CSS가 올바른 것처럼 PHP 루프 여야합니다. 나는 PHP가 CSS를 '오버라이드'한다는 것을 깨닫지 못했습니다. PHP 결과가 CSS 형식에 맞을 것이라고 생각했습니다. 나는 PHP를 살펴볼 것이다. 감사합니다 –

PHP는 CSS를 무시하지 않습니다. 'php' 루프에 의해 생성되는'html'에서 에러가 될 가능성이 더 큽니다. – Vector

요소에 display:inline-block;을 추가하십시오.

2013-07-23 19:53:52

당신이 묘사하는 방식대로 잘 작동해야합니다.

나는 요소가 이미지가 아닌 그들에 display:inline 또는 display:inline-block를 사용하려고 할 경우 jsfiddle DEMO

이미지, inline 요소로 표시 기본적으로 있습니다했다.

2013-07-23 20:26:10 BobbyZ

동의 - 그것은 문제가있는 내 PHP 또는 html입니다! –

답변