0

私は次のものを持っています：

<div class="outer">
  <p class="pclass">context...</p>
  <div class="inner">
      <img.../>
  </div>
</div>

ここに画像の説明を入力

内側の div の幅は、画像の幅によって異なります。

p の幅は、画像の幅に依存する必要があります。

P には動的テキストが含まれます。問題は、p のテキストが画像の幅よりも大きい場合、画像の上にジャンプすることです。

css を使用してこれを回避しようとしまし"text-overflow"たが、幅が必要です。

また、imgにmargin:0を設定し、周囲のdivに固執することを望んでいます。

4

1 に答える 1

1

以下を試してください。コードが少し単純化されます。

<div class="outer">
  <p><img src="">context...</p>
</div>

.outer {
    overflow: hidden;
}

.outer img {
    float: right;
    margin: 0 0 20px 20px;
}

本当に画像の周りにDIVが必要な場合は、画像の周りにDIVを追加して、画像が持つfloatプロパティとmarginプロパティを持つように設定し、表示するように設定することもできます。inline-block eg

<div class="outer">
  <p><div><img src=""></div>context...</p>
</div>

.outer {
    overflow: hidden;
}

.outer div {
    display: inline-block;
    float: right;
    margin: 0 0 20px 20px;
}
于 2013-02-06T13:05:46.293 に答える