为什么我的布局在浮动时显示如下？ [英] Why does my layout appear like this when floated?
问题描述
我有以下代码：
（请在Google Chrome 8 +上查看以下代码）
(Please check out codes below on 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 ？
Why the second image displays at the second line after character Q?
我不想更改代码1.我只想知道代码1显示这么奇怪的原因。我认为第二个图像应该显示在字符 ascacaaaaaa 左侧。与下面的代码2一样：
I don't want to change codes 1. I only wanna know the reason why codes 1 displays so strange. I think the second image should display at the left of characters ascacaaaaaa. Just like codes 2 below:
代码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>
谢谢！
推荐答案
使用CSS Float属性时，在图像周围环绕文字很容易。您可以选择将图片向左或向右浮动，其余为您完成。
Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you.
在此代码中u将图片左侧总是留在左边无关紧要的是你的文本。
in this code u write images to left so it will always stay at left doesn't matter where is your text.
这篇关于为什么我的布局在浮动时显示如下？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
