왜 내 레이아웃이 떠 다니는 것처럼 보입니까? (구글 크롬에 아래 확인하시기 바랍니다 코드 8+) 코드 1 :

나는 아래의 코드를했습니다왜 내 레이아웃이 떠 다니는 것처럼 보입니까? (구글 크롬에 아래 확인하시기 바랍니다 코드 8+) 코드 1 :

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>An HTML5 document</title> 
<div style="background:red; height:300px; width:1500px;"> 
    WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW 
    <img src="http://www.google.com/images/logos/ps_logo2.png" style="float:left;" width="900" height="230"> 
</div> 
<div style="background:green; color:yellow; font-weight:bolder; height:300px; width:1000px;"> 
    asc aca ascacaaaaaa<img style="vertical-align:top; float:left;" src="http://i3.ytimg.com/vi/F5qniuZG8Rg/default.jpg">Q 
</div>

왜 문자 Q에 이어 두 번째 줄에서 두 번째 이미지 표시 ?

코드를 변경하고 싶지 않습니다. 1. 코드 1이 이상하게 표시되는 이유를 알고 싶습니다. 두 번째 이미지는 문자 ascacaaaaaa의 왼쪽에 표시되어야한다고 생각합니다.

코드 2 :

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>An HTML5 document</title> 
<div style="background:red; height:300px; width:1500px;"> 
    WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW 
    <img src="http://www.google.com/images/logos/ps_logo2.png" style="float:left;" width="900" height="230"> 
</div> 
<div style="background:green; color:yellow; font-weight:bolder; height:300px; width:1000px;"> 
    asc aca ascacaaaaaab<img style="vertical-align:top; float:left;" src="http://i3.ytimg.com/vi/F5qniuZG8Rg/default.jpg">Q 
</div>

감사합니다 그냥 아래 코드 2처럼!

출처

2011-02-03 weilou

css로 작업하려면 올바른 html : body 태그, 올바른 doctype (http://www.w3.org/QA/2002/04/valid-dtd-list.html)을 수행해야합니다. 태그를 닫으십시오 ("
", ""). html이 이런 식이면 CSS는 좋은 방법으로 반응하지 않습니다. –

내 코드는 ** HTML5 ** 코드입니다. 그것은 W3C에 의해 성공적으로 검증되었습니다.http://validator.w3.org – weilou

실제로 유효합니다 ... 모든 브라우저는 html5와 호환됩니까? IE9, 마지막 크롬 및 파이어 폭스 만 타겟팅합니까? 그렇다면 정말로 원하는 최악의 html 코드를 작성할 수 있습니다. (저는 지난 5 버전의 IE와는 다른 출력물을 가지고 있습니다.) 그래도 여전히 유효합니다 ^^ –

CSS 플로트 속성을 사용하면 이미지 주위에 텍스트를 쉽게 배치 할 수 있습니다. 사진을 왼쪽 또는 오른쪽으로 띄우면 나머지는 선택이 가능합니다.

이 코드에서 왼쪽에 이미지를 쓰면 항상 왼쪽에 머무를 것이므로 텍스트가 어디에 있든 상관 없습니다.

출처

2011-02-03 10:27:29 enthusiastic

코드 1이 이상하게 보이는 이유를 알고 싶습니다. 두 번째 이미지는 문자 ascacaaaaaa의 왼쪽에 표시되어야한다고 생각합니다. 코드 2처럼. 고마워. – weilou

당신은 이것을 읽을 필요가 있습니다. http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ – enthusiastic

첫 번째 이미지가 아래로 밀려납니다. 명확하게 추가하십시오 : 왼쪽; 두 번째 div에서 (당신이 달성하기를 원하는 것에 따라).

업데이트 : 두 번째 버전을 게시 한 후 Firefox에서 체크 아웃했습니다. 그들은 단지 같은 방식으로 표시됩니다, 유일한 차이점은 No.2에 더 긴 텍스트가 있다는 것입니다. :). 이미지를 플로팅 할 때는 보통의 인라인 흐름에서 이미지를 가져옵니다. 이것이 바로 인라인 텍스트가 이런 식으로 표시되는 이유입니다. 다른 떠 다니는 물체 (큰 그림)가 아래로 밀면 이미지가 텍스트의 시작 부분 왼쪽에 나타나지 않습니다.

업데이트 2 : 좋아, 최근 코드 (Chrome 8)를 확인해 보니 차이가 있습니다. 'ascacaaaaaaQ'(코드 1)은 Google 로고 옆에 있으며 'ascacaaaaaabQ'(코드 2)는 로고 아래의 다음 줄로 이동합니다. 두 번째 로고가 너무 길어서 로고와 녹색 div의 오른쪽 테두리 사이의 작은 공간에 맞도록 길이가 너무 길기 때문에 ('단어'이므로 깨지지는 않습니다) 여전히 (코드 2에서) 두 번째 이미지는 'ascacaaaaaa'왼쪽에 나타나지 않습니다. 바로 아래에 있습니다.

출처

2011-02-03 10:23:35 kapa

코드 1을 변경하고 싶지 않습니다. 코드 1이 이상하게 표시되는 이유를 알고 싶습니다. 두 번째 이미지는 문자 ascacaaaaaa의 왼쪽에 표시되어야한다고 생각합니다. 코드 2처럼. 감사합니다! – weilou

@Wei : 내 대답에 만족하지 않는다면 어떤 차이가 보이지 않기 때문에 어떤 브라우저를 사용하고 있는지 알려주십시오. – kapa

Google 크롬 브라우저에서이 문제를 확인해야한다고 생각합니다. 감사. – weilou

첫 번째 이미지가 너무 넓어서 같은 줄에 맞지 않습니다. 그리고 그것이 맞을지라도 부모 div 요소의 텍스트와 같은 줄에 있지는 않습니다. 왼쪽으로 뜨다; 이미지가 정상 흐름 외부에서 렌더링됨을 의미합니다.

출처

2011-02-03 10:26:29 Harri

코드 1이 이상하게 보이는 이유를 알고 싶습니다. 두 번째 이미지는 문자 ascacaaaaaa의 왼쪽에 표시되어야한다고 생각합니다. 코드 2처럼. 감사합니다! – weilou

두 번째 div 요소에'clear : both;'를 추가하십시오. 이렇게하면 첫 번째 div의 떠 다니는 이미지는 두 번째 div의 렌더링에 영향을 미치지 않습니다. – Harri

감사합니다. 나는이 사실을 알고. 그리고 나는 코드 1을 변경하고 싶지 않습니다. 나는 왜 그것이 'ascacaaaaaa'라는 문자의 왼쪽에 ** 코드 2 **처럼 표시되지 않는지 알고 싶습니다. – weilou

첫 번째 이미지의 너비가 두 번째 div까지 확장되어 텍스트의 왼쪽에 나타납니다 (플로트로 설정되어 있기 때문에).

두 개의 div 요소를 나누기 위해 공간을 추가하면 두 번째 이미지가 원하는 위치에 표시됩니다. 이를 확인하려면 margin-top: 150px; 또는 clear:left; 스타일을 두 번째 div에 추가하십시오.

출처

2011-02-03 10:27:32

왜 내 레이아웃이 떠 다니는 것처럼 보입니까?</p> <p>(구글 크롬에 아래 확인하시기 바랍니다 코드 8+)</p> <p>코드 1 :

답변

왜 내 레이아웃이 떠 다니는 것처럼 보입니까?</p> <p>(구글 크롬에 아래 확인하시기 바랍니다 코드 8+)</p> <p>코드 1 :

답변

관련 문제