0

これは私が知っている奇妙な質問ですが、私はそれを解決する時間があります。属性付きの画像がありfloat: left;ますが、このスタイルはdivに複数の行がある場合にのみ機能します。divに1行ある場合、それは画像と重なります。何が問題なのでしょう？

<div style="
    overflow: hidden;
    width: 600px;
    border: 1px solid black;
    padding: 5px;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 14px;
">
    <img src="images/monkey.jpg" style="
        margin-right: 7px;
        border: 1px solid #C0C0C0;
        padding: 5px;
        float: left;
        height: 62px;
        width: 80px;
    ">
    <div style="
        margin-top: -15px;
        margin-bottom: -15px;
        word-wrap: break-word;
    ">
        <p>
            What's your plan about short posts and such?
        </p>
    </div>
</div>
4

1 に答える 1

0

Firefox11とChrome18の両方で機能するものは次のとおりです。

<div style="overflow:hidden;width:600px;border:1px solid black;padding:5px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;">
    <img src="images/monkey.jpg" style="float:left;margin-right:7px;border:1px solid #C0C0C0;padding:5px;height:62px;width:80px;">
    <div style="float:left;margin-bottom:-15px;word-wrap:break-word;">
        <p>What's your plan about short posts and such?</p>
    </div>
</div>

これが他のブラウザで遊ぶためのフィドルです。

于 2012-04-10T01:20:42.167 に答える