爲什麼div不會浮在圖片旁邊？（而不是圖像）

我想要一個圖像，然後在圖像的右側，我想要一個div盒子在那裏。我一直在試圖尋找原因，但我找不到它。我假設因爲某些原因，div無法在圖像旁邊浮動，因爲我已經成功地使用了文本。爲什麼div不會浮在圖片旁邊？（而不是圖像）

http://jsfiddle.net/n8ZDQ/1/ （你可以看到紅色的DIV框實際上大多是背後的形象，只是其中的一部分被飛出右側）

HTML：

<img src="http://stignatiusyardley.org/pictures/NFP/NFP%20family%20image.jpg" style="float:left;width:370px;height:246px;" />

CSS：

#optin { 
width:466px; 
border:1px solid #CCCCCC; 
height:166px; 
background-color:red;

}

2012-12-01 king

該div本身並不漂浮！嘗試將float: left添加到#optin。

2012-12-01 05:11:36

ohhhhh ......我想我經常只是浮在iamge，然後才讓未來的一切去它...大聲笑。感謝jesse！ – king

DIV默認爲block級別元素。只有inline或inline-block元素會以您想要的方式顯示。要獲得所需的效果，您需要製作DIV display: inline-block或float: left。

2012-12-01 05:13:53 techfoobar

調整#optin的CSS浮動以及

#optin { 
    width:466px; 
    border:1px solid #CCCCCC; 
    height:166px; 
    background-color:red; 
    float: left; 
}

2012-12-01 05:13:54

爲什麼div不會浮在圖片旁邊？ （而不是圖像）