Question

我的代码如下：

（请在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.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>

谢谢！

Answer 1

你的第一张图片正在向下推。尝试添加clear：left;在第二个div（取决于你想要达到的目标）。

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

更新2：确定，现在查看您的最新代码（Chrome 8），我看到了不同之处。 'ascacaaaaaaQ'（代码1）停留在Google徽标旁边，而'ascacaaaaaabQ'（代码2）则转到徽标下的下一行。而这仅仅是因为第二个太长（它是一个'字'，因此不会破坏）以适应徽标和绿色div的右边界之间的小空间。还是对我来说，（在代码2中）第二张图片没有出现在'ascacaaaaaa'的左边，它就在它下面。

Answer 2

第一张图片很宽，不能放在同一条线上。即使它适合，它仍然不会与父div元素中的文本在同一行。向左飘浮;表示图像在正常流程之外呈现。

Answer 3

使用CSS Float属性时，很容易在图像周围环绕文本。您可以选择将图片浮动到左侧或右侧，其余的都是为您完成的。

在这段代码中你把图像写到左边所以它总是留在左边并不重要你的文字在哪里。

Answer 4

这是因为你的第一个图像足够高，它向下延伸到第二个div，因此它出现在文本的左侧（因为它设置为浮动）。

如果您添加一些空格来分解两个div元素，那么您将在所需的位置看到第二个图像。尝试将样式margin-top: 150px;或clear:left;添加到第二个div以查看此内容。

浮动时为什么我的布局看起来像这样？

4 个答案: