为什么浮动时我的布局显示为这样？

（请看看下面的代码在谷歌浏览器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：

代码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>

谢谢！

来源

2011-02-03 weilou

如果你想使用CSS你必须做一些正确的HTML：HTML，正文标签，正确的DOCTYPE（http://www.w3.org/QA/2002/04/valid-dtd-list.html），关闭您的标签（“
”，“”）。如果你的html是这样的，CSS将不会有很好的反应。 – 2011-02-03 10:25:33

我的代码是** HTML5 **代码。它由W3C成功验证。http://validator.w3.org – weilou 2011-02-03 10:28:37

它确实有效，...每个浏览器html5兼容？你的目标只有IE9，最后一个Chrome和Firefox？如果是的话，的确可以写出你想要的最糟糕的html代码。（我有不同的输出与每个最后5个版本的IE），但它仍然是有效的^^ – 2011-02-03 16:23:22

使用CSS Float属性时，使用图像缠绕文本很容易。您可以选择将图片向左或向右浮动，其余部分已完成。

在此代码中，您将图像写入左侧，以便它始终保持在左侧，无论您的文本在哪里都无所谓。

来源

2011-02-03 10:27:29 enthusiastic

您的第一张图片正在推低。尝试添加清除：左侧;在第二个div（取决于你想实现的目标）。

更新：在您发布第二个版本后，我在Firefox中检查了它。它们以同样的方式显示，唯一的区别在于第2号中的文字较长。 :)。浮动图像时，将其从正常的内联流程中取出，这就是内联文本以这种方式显示的原因。该图像不会出现在文本的开头左侧，因为另一个浮动对象（大图片）会将其压下。

UPDATE 2：好的，现在查看您的最新代码（Chrome 8），我看到了不同之处。 'ascacaaaaaaQ'（代码1）停留在Google徽标旁边，而'ascacaaaaaabQ'（代码2）则转到徽标下的下一行。这只是因为第二个太长（这是一个'单词'，所以不会中断），以适应徽标和绿色div的右边框之间的小空间。对我来说，（在代码2中）第二个图像不会出现在'ascacaaaaaa'的左边，它就在它的正下方。

来源

2011-02-03 10:23:35 kapa

第一张图像太宽，无法放在同一行上。即使它适合，它仍然不会与父div元素中的文本位于同一行。向左飘浮;意味着图像呈现在正常流程之外。

来源

2011-02-03 10:26:29 Harri

这是因为您的第一张图片足够高，它向下延伸到第二个div，所以它显示在文本的左侧（因为它被设置为浮动）。

如果你添加一些空间来分解两个div元素，那么你会看到你想要的地方的第二个图像。尝试将margin-top: 150px;或clear:left;的样式添加到第二个div以查看此内容。

来源

2011-02-03 10:27:32

为什么浮动时我的布局显示为这样？

回答

相关问题