Question

我的代码1和代码2如下：

（请在Google Chrome 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个代码显示不同。

Answer 1

他们以什么方式不同？我能看到的唯一区别是'Q'在图片之后被包裹起来。这是因为图片向左浮动。

一个奇怪的CSS问题

1 个答案: