2012-04-13 3 views
0

를 정의 경우에도 차단됩니다 :DIV는 폭과 높이가 내 페이지에있는

<div id="result" class="thumbholder"><img src="img/thumbs/thumb01.png" alt="thumb" /></div> 

는 CSS :

.thumbholder{ 
width:100px; 
height:100px; 
text-align:center; 
overflow:hidden; 
border-radius:6px; 
float:left; 
margin:0; 
} 

#result DIV는 CSS의 아무 곳이나 정의되지 않은 (I 체크) .

div는 100x100 크기로 표시하지 않고 높이의 일부를 잘라냅니다. 더 낮은 둥근 모서리를 볼 수 있기 때문에 모든 것이 표시되지 않는 것은 아닙니다. 실제로 정의 된 것보다 더 작은 높이가 있습니다. 왜 이런 일이 일어나는 걸까요?

내부의 이미지도 100x100 크기이지만 중요하지는 않습니다. 내부에 넣은 것과 같은 일이 발생합니다.

EDIT : 높이를 인라인으로 정의해도 도움이되지 않습니다.

+2

jsFiddle을 사용하여 살펴볼 수 있습니까? –

+0

Google 크롬에서 작동 확인 http://jsfiddle.net/uWAMV/ – Undefined

+0

[http://jsfiddle.net/didierg/8Exf6/](http://jsfiddle.net/didierg/8Exf6/)에서 작동] - 당신은 당신의 div로 어수룩한 다른 스타일을 가져야 만합니다 ... –

답변

1

그것은 훌륭한 솔루션이 아니다 100 픽셀

.thumbholder 
{ 
    width:100px !important; 
    height:100px !important; 
    text-align:center; 
    overflow:hidden; 
    border-radius:6px; 
    float:left; 
    margin:0; 
} 

하지하는 높이의 원인이 될 수있는 다른 코드를 오버라이드 (override) !important를 사용해보십시오 있지만, 문제를 디버그하는 데 도움이 될 수 있습니다. 그렇지 않으면 Chrome의 검사기 (또는 방화 녀)를 사용하여 높이 정의를 무시하는 항목을 찾으십시오.

1

Firebug에서 다른 스타일을 상속 받고 있는지 확인 했습니까? 'display : block'을 추가하면 높이 속성이 무시되는 경우 인라인 요소로 표시 될 수있는 것처럼 들릴 수도 있습니다. 또는 어쩌면 최대 높이 : 어딘가에 설정되어있을 수 있습니다.이 경우 '최대 높이 : 100 % '가 작동 할 수 있습니다.

+0

표시 : 블록이 아무 것도하지 않으며 최대 높이도 표시하지 않습니다. – jovan

+0

모든 게시물을 밖으로 시도한 후,이 'max-height'만이 항상 기억할 것입니다. –

0

이 시도 대신

 <div style="clear:both;"></div> 
     <div id="result" class="thumbholder"><img src="img/thumbs/thumb01.png" alt="thumb" /></div> 
관련 문제