2

div内にimgがあります。img は右にフロートし、テキストは左から (長いテキストの場合は) 下から次のように囲む必要があります。

テキスト テキスト:IMG
テキスト テキスト:IMG
テキスト テキスト::::
テキストテキストテックス
:::::::::::::

コロンはスペース (余白) を表す必要があります。

長いテキストの場合は、すべて正常に機能しています。ただし、テキストが短すぎて img の高さを超えない場合、結果は次のようになります。

テキスト テキスト:IMG
テキスト テキスト:IMG
         ::::
:::::::::::::

しかし、次のようにする必要があります：

テキスト テキスト:IMG
テキスト テキスト:IMG
:::::::::::::

では、内側の img の margin-bottom と外側の div の margin-bottom を折りたたむにはどうすればよいですか?

内側と外側の関係、または両方のマージンが下部マージンであるため、マージンの折りたたみが機能しないと仮定しますか?

関連する可能性があります: box-sizing: border-box を使用します

ありがとうございました

コード

HTML:

<div>
    <img src="image.png" alt="" />
    Some text
</div>

CSS:

div {
    margin-bottom: 10px;
}

div img {
    float:right;
    margin: 0 0 10px 10px;
}

編集

私の回避策：

HTML

<div>
    <img src="image.png" alt="" />
    <div>
        Some text
    </div>
</div>

CSS

div {

}

div img {
    float:right;
    margin: 0 0 10px 10px;
}

div div {
    margin-bottom: 10px;
}
4

1 に答える 1

0

問題は、div 要素がインラインとして表示されていることです。段落と画像をブロックにする必要があるため、次のように display:inline-block を使用する必要があります。

div {
margin-bottom: 10px;
display:inline-block;
}

div img {
    float:right;
    margin: 0 0 10px 10px;
}

ここで結果を見ることができます

于 2013-04-19T15:48:31.990 に答える