一个奇怪的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：bold; 这是一个真正的CSS规则？如果不是那么这就是你的问题 – benhowdle89 2011-02-03 11:12:54

＃1和＃2之间的唯一区别是左浮动图像之前的文本...`asc aca ascacaaaaaa！= asc aca ascacaaaaaab` – acm 2011-02-03 11:13:59

它们以何种方式不同？我能看到的唯一区别是'Q'在图片后被包裹起来。这是因为图片左边是浮动的。

来源

2011-02-03 11:14:41 Hogsmill

一个奇怪的CSS问题

回答

相关问题