0

tekst (段落) が常にフローティング画像をラップする方法を知っていますか? [画像を見る]

例-float

テクストはイメージを超えてほしい。以下の例の img のように。使用してみz-indexましdisplay:inlineたが、どちらも機能しませんでした。

例-欲しいもの

これは私の実際の HTML ではありませんが、基本的には私がどのように見えるかです。

<img src="" alt="" style="float:right;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros tellus, sit amet ultrices quam. Sed quis justo metus, quis gravida orci. Vivamus porttitor fringilla massa at luctus. Quisque lacinia diam eget justo tempor vehicula. Nulla fringilla libero sit amet tortor bibendum imperdiet. Pellentesque in risus vel libero pellentesque hendrerit. Suspendisse vehicula fermentum pretium. Sed elementum eleifend dolor nec aliquam. Nam ac viverra dolor. Vivamus vitae ultricies velit.</p>
4

3 に答える 3

2

position: absoluteとを使用して画像をテキストの後ろに移動するかz-index、画像を段落の背景画像として使用できます。

例えば

HTML:

<p><img src="xyz.jpg" /> Lorem ipsum</p>

CSS:

img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
p {
    z-index: 10;
}

または:

<p>Lorem ipsum</p>

CSS:

p {
    background: url(xyz.jpg) top right no-repeat transparent;
}
于 2012-06-07T08:39:05.620 に答える
2

試す：

<div style="position: relative;">
 <img src="" alt="" style="position: absolute; top: 0px; right: 0px;" />
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed eros tellus, sit amet ultrices quam. Sed quis justo metus, quis gravida orci. Vivamus porttitor fringilla massa at luctus. Quisque lacinia diam eget justo tempor vehicula. Nulla fringilla libero sit amet tortor bibendum imperdiet. Pellentesque in risus vel libero pellentesque hendrerit. Suspendisse vehicula fermentum pretium. Sed elementum eleifend dolor nec aliquam. Nam ac viverra dolor. Vivamus vitae ultricies velit.</p>
</div>

ポイントはabsoluteポジショニングです。コンテナーに位置が設定されていることを確認します (relative現在位置が設定されていない場合に使用します)。

(z-indexレイヤーが正しいことを確認するために、いくつかの ing が必要になる場合もあります)。

于 2012-06-07T08:40:31.797 に答える
0

私が質問を理解したら、これがあなたが望むものですjsfiddle。

Z-index は でのみ機能しposition: absoluteます。カウントダウン座標は、プロパティ position の値によって異なります。親要素が に設定されている場合、position: relative子要素の絶対位置によって、親の上での位置が決まります。

于 2012-06-07T08:50:54.470 に答える