爲什麼浮動時我的佈局顯示爲這樣？

（請看看下面的代碼在谷歌瀏覽器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

爲什麼浮動時我的佈局顯示爲這樣？

回答

相關問題