69

CSS で一見単純に見えることをしようとするたびに、うまくいきません。

460x160 の画像を含むコンテンツ div があります。私がしたいのは、画像を右下隅に配置し、テキストをその周りに折り返すことだけです。

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

だから私はそれが次のようになりたい：

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

左上または右上の画像でそれを行うのは簡単です:

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

では、どうやってそれを底に押し込むのですか？これまでに思いついた最高のものは次のとおりです。

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

この場合、テキストは余白に印刷されないため、画像の上に余白があります。

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

この場合、テキストは画像の上または下に印刷されます。

それで...どうすればこれを達成できますか？

4

8 に答える 8

33

確かに以前（2003）、以前（2002）、または以前（2005）に尋ねられたようです

最後のリンクは、実際にはJavaScript ベースのソリューションを提案していますが、固定された (つまり、非流動的な) ソリューションです。

ただし、見つかった他のアドバイスと一致しています

これを行う唯一の方法は、浮動要素をテキストの途中に配置することです。常に完璧にすることは不可能です。

またはこれ：

これは、垂直方向の「プッシャー」要素 (img など。ただし、空の div を使用する方が賢明かもしれません) をフロートさせてから、clear プロパティを使用して目的のオブジェクトをその下にフロートさせます。この方法の主な問題は、テキストが何行あるかを知る必要があることです。「プッシャー」の高さをコンテナーの高さからフロートの高さを引いた値に変更するだけで済みます (コンテナーが固定/最小高さでないと仮定します)。 .

とにかく、このスレッドで議論されているように、簡単な解決策はありません...

Cletusは2003 年のこのスレッドについてのコメントで言及していますが、これは簡単には達成できないという事実をもう一度述べています。
ただし、達成したい効果に近いこのEric Meyer の記事を参照しています。

フロートと通常の流れがどのように相互に関係しているかを理解し、クリアリングを使用してフロートの周りの通常の流れを操作する方法を理解することで、作成者は非常に強力なレイアウト ツールとしてフロートを使用できます。
float はもともとレイアウトに使用することを意図したものではないため、意図したとおりに動作させるにはいくつかのハックが必要になる場合があります。これには、フロートを含むフローティング要素、「クリア」要素、または両方の組み合わせが含まれる場合があります。

それでも、Chadwick Meyerは、彼の回答で、 :beforeCSS セレクター( Leonardの回答のバリエーション)に基づくソリューションを 提案しています。
ここで機能します。

2021 年 4 月の更新: Temani Afifは、 exbox を shape-outside と組み合わせて使用​​することを彼の回答で提案しています。ただし、すべてのブラウザーでのサポートは非​​常に優れていますが、 Flexbox の下位互換性を
確認してください。

于 2009-02-01T00:29:28.493 に答える
16

ええと...これはかなり古い投稿ですが、私は苦労して小さな回避策でこれを回避しました。画像を右に配置し、上から正確に 170 ピクセルにする必要がありました。また、画像の上、左、下にテキストを流す必要があります。だから私がしたことは、幅が 0px、高さが 170px、右にフロートがある a を作成することです。すると、img が浮き上がってクリアになり、出来上がりです!

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text

かなりうまくいきました:)

于 2011-08-23T22:37:27.717 に答える
0

投稿されたソリューションに加えて、クイック JQuery ハックを使用して、プッシャーの高さを動的に調整しました。コンテンツ領域の高さから右下に揃えたい領域の高さを取得し、それを適用しましたプッシャー div、そのように:

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

若干の微調整が必​​要ですが、通常は期待どおりに機能します。

于 2012-02-10T12:34:07.757 に答える
-1

私が見つけた解決策は、幅もテキストの量も変わらないdivを持っていることです。次に、画像をテキスト内に配置し、align=right にすることができます。したがって、その周りに適切な量のテキストがある場合は、div の右側と下部に画像が表示されます。

    <style >
#contents{
    border: 2px solid red;
    background: #ddd;
    position: absolute;
    width:600px;
}



</style>
<div id="contents">
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...  <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...
     hey hey text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...
</div>
于 2009-02-01T00:29:00.803 に答える
-2

Ok。だから私は実際にこれと同じ問題を抱えていて、ある時点で答えが土曜日の夜のチーズケーキのように私を襲った. これは、Word でテキストの折り返しを設定しようとした場合とほぼ同じヒット アンド ミス効果です。

img.right {
     float: right;
}

あとは、改行したいテキストの内側に設定するだけです。テキストはテキストの最後までフロートするため、テキストは常に左に押し出されますが、画像をテキストの中央に配置すると...

<p>This is some text <img src="example.jpg" class="right" /> and then add
some more text.</p>

上部はそのままで、テキストは画像の上に自由に浮かび、残りは画像の左側に押し出されます。これは回避策ですが、JS を使用するほど面倒ではありません。WYSIWYG エディターを使用すると、さらに簡単になります。考えてみると、WYSIWYG エディターを使用すると、自動的にその機能が備わっています。:P 問題が解決しました。

乾杯。

于 2010-07-10T23:04:15.293 に答える