我有下面的代码 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个代码显示不同。
最佳答案
它们有什么不同？我能看到的唯一区别是“Q”在图片后环绕。这是因为图片向左浮动。
关于css - 一个奇怪的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4885372/