4

画像とfloat:left;画像の周りを流れるテキストがあるとします。

コードは非常に単純です。

<img src="image.jpg" style="float:left">
<p style="outline: 1px dotted blue">Lorem ipsum...</p>

テキストをラップするが画像はラップしないアウトラインを表示する方法はありますか？テキストの通常のアウトラインはあなたにこれを与えます：

ここに画像の説明を入力してください

しかし、私はこれが欲しい：

ここに画像の説明を入力してください

を使用するdisplay:inline;と<p>、テキストの表示境界を「ブロック単位」で表示するのではなく、各行にアウトラインが表示されます。

CSS3は合法であり、ハードコアCSS/JSは許可されています...

4

2 に答える 2

3

このようなものを試すことができます。画像を左上に移動して、通常の境界線を覆い隠します。次に、独自の境界線を与えて、錯覚を完成させます。

<article>
 <img src="image.jpg" style="float:left">
 <p>Lorem ipsum...</p>
</article>


article {
 border: 1px blue dotted;
}

img {
 background-color: white;
 border-right: 1px blue dotted;
 border-bottom: 1px blue dotted;
 margin: -1px 0 0 -1px;
 padding: 0 5px 10px 0;
}

これがフィドルです：http://jsfiddle.net/KW45t/

于 2012-06-29T15:24:15.163 に答える
0

このjsfiddleをチェックしてくださいhttp://jsfiddle.net/pollirrata/rKaHk/1/

それは派手ではありませんが、仕事になります

于 2012-06-29T15:32:48.300 に答える