奇妙なCSSの問題

、私は以下のコード1とコード2しました：奇妙なCSSの問題

（8+ Google Chromeの上で以下のコードをチェックしてみて下さい）

コード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つのコードが違うのかわかります。

出典

2011-02-03 weilou

font-weight：bolder; 本当のCSSルールですか？それではあなたの問題はありません – benhowdle89

＃1と＃2の違いは、左の浮動画像の前のテキストです... 'asc aca ascacaaaaa！= asc aca ascacaaaaaab' – acm

@ benhowdle89それは本当です。それは太字よりも大胆です！ –

どのように違いはありますか？私が見ることのできる唯一の違いは、 'Q'が写真の後ろにラップされることです。これは、画像が左に浮かぶためです。

出典

2011-02-03 11:14:41 Hogsmill

私は2番目の画像がコード1の「Q」の後に2行目に表示される理由を知りたいですか？コード2の状況と同じように、 'ascacaaaaaa'の左に2番目が表示されるはずです。ありがとう！ – weilou

それはテキストの行が異なる長さなので、ラッピングしているからです。 1と2の行を長くしてみてください... – Hogsmill

答えて

関連する問題