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

div 自体はフローティングではありません。に追加float: leftしてみてください#optin。

score 3 · Accepted Answer

DIV は、blockデフォルトではレベル要素です。inlineまたは要素のみinline-blockが希望どおりに表示されます。必要な効果を得るには、DIVdisplay: inline-blockまたはfloat: left.

score 1 · Accepted Answer

#optin の css も float に調整します

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

3 に答える 3