html - 为什么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;" />

</p>

CSS：

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

}</p>

score 3 · Accepted Answer

3

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

于 2012-12-01T05:11:36.463 回答

score 3 · Accepted Answer

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

score 1 · Accepted Answer

将#optin的css调整为浮动

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

3 回答 3