div가 왜 이와 같이 작동합니까?

이 문제는 예상대로 작동하지 않을 때가 있습니다. 내가 원했던 것은 레이아웃에 '플로우'하는 것입니다. 그러나 나는 그들이 왜 그렇게 궁금해하지 않았 음을 이해합니다. 나는 CSS를 조사하기 위해 방화 녀 (firebug)를 사용했고, 그들이 줍고있는 것은 표준에서 벗어난 것처럼 보이지 않는다.div가 왜 이와 같이 작동합니까?

올바르게 렌더링 된 테스트 사이트에서 문제가되는 페이지 두 세트를 제공했습니다. div에 대한

코드 :

<div style="border:solid 1px #c9c9c9; width:100px; height:100px; float:left;"> 
    sss 
</div> 
<div style="border:solid 1px #c9c9c9; width:100px; height:100px; left:20px; position:realtive;"> 
    2 
</div>

흐르는 div를의 그림 :

http://i47.tinypic.com/2ewfpz9.jpg

누구가 그들을 얻을하는 방법을 알고 흐르는하지

http://i45.tinypic.com/t5k8x1.jpg

그림 div를의 예상대로 행동 하는가? 플로트를 넣으면 두 번째 div에 남겨 둡니다.하지만 다음 div가 제대로 다음 줄로 떨어지지 않는다는 것을 의미합니다.

누군가가 도와 줄 수 있기를 바랍니다. , 많이 평가 됨

출처

2010-01-05 Exitos

이미지가 올바르게 표시되지 않는 경우 수정할 게시물을 수정하십시오. –

사람들이 쉽게 볼 수 있도록 질문에 코드를 잘라내어 붙여 넣으십시오. 두 코드 스 니펫이 나에게 똑같은 것처럼 보입니까? 그렇다면 두 렌더링간에 다른 점은 무엇입니까? – Paolo

그 차이점은 그가 우리에게 보여주지 않는 것임을 의심합니다! – Benjol

float 상자가 아니라 텍스트 만 "잘라 내기". 그리고 귀하의 사진 중 그 CSS 속성의 올바른 렌더링은 없습니다. 올바른 렌더링은 테두리 안에 'sss'가 있고 아래쪽 테두리 아래에 '2'가있는 같은 위치 (겹침)의 두 상자 여야합니다.

두 div에서 float:left;을 사용하면 문제를 해결해야합니다. 물건 브라우저에서 말썽 경우

<div style="float:left;">sss</div> 
<div style="float:left;">2</div> 
<div style="clear:both;">the next div</div>

, 당신은 XHTML 1.1과 같은 보편적 인 기본 CSS를 가진 문서 타입을 사용하십시오. 그렇지 않으면 모든 요소에 대한 기본 스타일 시트를 생성 할 수 있습니다.

출처

2010-01-05 10:32:45

Imho 두 번째 div에 float을 추가하려고 시도한 후 세 번째 div가 clear:both이어야합니다.

당신은 두 사업부의 부동 소수점 왼쪽 확인하고 요소 또는 CSS에서 3 사업부에 할 수

출처

2010-01-05 10:23:46 IProblemFactory

는 "분명히 : 둘 다"... 그런데

멋진 이미지 : D는 도대체 당신은 그들을 했는가 방법 어쨌든 불분명하다.

출처

2010-01-05 10:26:02 Younes

인스턴트 메신저 혼란스러워 내 이미지에 어떤 문제가 보이지 않는 이유는 무엇입니까? – Exitos

나는 그 (것)들을 지금 불분명하게 보이지 않는다. – Younes

div가 왜 이와 같이 작동합니까?

답변

관련 문제