Why does my layout appear like this when floated?
I've codes below:
(Please check out codes below on Google Chrome 8+)
codes 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>
Why the second image displays at the second line after character Q?
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:
codes 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">开发者_如何学JAVA
</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>
Thank you!
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.
in this code u write images to left so it will always stay at left doesn't matter where is your text.
The first image is so wide, that it can't fit on the same line. And even though it would fit, it still would not be in the same line as the text in the parent div element. float:left; means that the image is rendered outside of the normal flow.
It is because your first image is tall enough that it extends down into the second div, so it appears to the left of your text (since it is set to float).
If you add some space to break up the two div elements, then you will see the second image in the place that you want. Try adding the style margin-top: 150px; or clear:left; to the second div to see this.
Your first image is pushing it down. Try adding clear: left; on the second div (depending on what you want to achieve).
UPDATE: After you posted your second version, I checked it out in Firefox. They display just the same way, the only difference is that you have a longer text in No.2. :). When you float the image, you take it out from its normal inline flow, that's why inline text displays this way. The image does not appear next to the left of the beginning of the text, because another floated object (big picture), pushes it down.
UPDATE 2: OK, checking out your latest codes (Chrome 8) now I see a difference. 'ascacaaaaaaQ' (code 1) stays next to the Google logo, while 'ascacaaaaaabQ' (code 2) goes to the next line under the logo. And that's simply because the second one is too long (it's one 'word', so won't break) to fit in the small space between the logo and the right border of the green div. Still for me, (in code 2) the second image does not appear to the left of 'ascacaaaaaa', it's right under it.
加载中,请稍侯......
精彩评论