이상한 CSS 문제

내가했습니다 코드 1과 2 아래 코드 :이상한 CSS 문제

(구글 크롬에 아래 확인하시기 바랍니다 코드 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.swliuxue.com/newindex/uploadfile/201011/18/162266581.jpg" 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>

코드 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.swliuxue.com/newindex/uploadfile/201011/18/162266581.jpg" 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

font-weight : bolder; 그게 진짜 CSS 규칙인가요? 그 다음 문제가 없다면 – benhowdle89

# 1과 # 2 사이의 차이점은 왼쪽 플로트 이미지 앞에있는 텍스트입니다 ... 'asc aca ascacaaaaaa! = asc aca ascacaaaaaab' – acm

@ benhowdle89 그것은 사실입니다. 대담한 것보다 대담합니다! –

그들은 어떤면에서 다른가요? 내가 볼 수있는 유일한 차이점은 'Q'가 그림 뒤를 감싸는 것입니다. 이것은 그림이 왼쪽으로 떠 다니기 때문입니다.

출처

2011-02-03 11:14:41 Hogsmill

코드 1에서 'Q'뒤에 두 번째 이미지가 두 번째 줄에 표시되는 이유를 알고 싶습니다. 나는 코드 2의 상황처럼'ascacaaaaaa'의 왼쪽에 두 번째가 표시되어야한다고 생각합니다. 고마워요! – weilou

텍스트 줄이 다른 길이이므로 줄 바꿈을하기 때문입니다. 1과 2로 줄을 길게하면 다음과 같이 보일 것입니다. – Hogsmill

이상한 CSS 문제

답변

관련 문제