0

浮かんでいる画像があります左画像の横に画像の周りにテキストが折り返されています。

画像の横にテキストの最初の行を配置し、画像の上にテキストの連続する行を配置したいと思います。それは可能ですか？

これらの画像をチェックして、私が達成しようとしていることを確認してください。

問題

赤い四角が画像です。

<img class="someImage" ... />
<span class="someText" ... />

.someImage { float:left; }
.someText { line-height:1.5em; margin-top:10px; padding:0 22px; }

画像には高さがあります。画像の上にテキストの行（段落の最初の行の後）を折り返したいです。最初の行だけを画像に折り返したいのです。

4

4 に答える 4

1

... wait for it ...first-line セレクターを使用して、最初の行をより詳細に制御できます。

p:first-line {padding-left:50px;}

于 2012-10-02T15:01:20.383 に答える
1

text-indent背景画像を使用して回避策を使用できます。デモ。

HTML

<div id="text">
Lorem ipsum dolor sit amet...
</div>​

CSS

#text {
    background:url(your-image.jpg) top left no-repeat;
    text-indent:100px;
    padding-left:20px;
}
于 2012-10-02T14:50:33.153 に答える
1

配置に float を使用している場合、float は配置の通常の流れを中断しないため、これを実現するのは困難です。代わりに絶対配置と z-index プロパティを使用してオーバーレイします。次に、left-margin または text-indent プロパティを使用して最初の行をインデントします。

画像を背景にすると、より簡単に実行できます。

于 2012-10-02T14:51:25.023 に答える
1

調べてみると、 text-indent はまさにあなたが探しているものだと思います。 http://www.w3schools.com/cssref/pr_text_text-indent.asp

于 2012-10-02T14:49:09.807 に答える