为什么div不会浮在图像旁边？ （落后于图像）

Question

我正在尝试拍摄图像，然后在图像的右侧我想要一个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;

}

Answer 1

div本身并不浮动！尝试将float: left添加到#optin。

Answer 2

默认情况下，DIV是block级元素。只有inline或inline-block元素才会显示您想要的方式。要获得所需效果，您需要制作DIV display: inline-block或float: left。

Answer 3

将#optin的CSS调整为浮动

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