-1

CSSの「display:flex;」で、
画像の高さを超えるまでは、画像の左にテキストを表示。
画像の高さを超えた地点から、画像の下にもテキストを表示する方法はありますか?

画像の高さを超えるまでのイメージ画像
画像の高さを超えるまでのイメージ画像

3
  • 1
    このイメージの中で、どこが display:flex で、どれがフレックスアイテムなのでしょうか。質問に具体的なコードがあると理解しやすく回答しやすいです。
    – int32_t
    Commented 3月19日 4:30
  • float:right, float:left では何か問題あるのでしょうか? 参考: How to wrap text around an image using HTML/CSS, How to wrap text around an image placed at the END of a block of text?
    – oriri
    Commented 3月19日 9:20
  • 「float:right, float:left では何か問題あるのでしょうか?」問題はありませんが、純粋に「display:flex;」で同じことができる方法があるのか知りたかったので質問しました。
    – re9
    Commented 3月22日 11:23

1 件の回答 1

2

<svg width=200 height=100 style="float:right;background:red"></svg>
<h3>タイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

上記のようなイメージで合ってますでしょうか?そうであれば、方法はありません。 上記はdisplay:flex;は一切使用していないため、質問で聞きたい方法には該当しません。

HTMLでのCSSを用いたレイアウトには多くの方法がありますが、フレックスボック(display:flex;)でもグリッド(display:grid;)でも基本は長方形のブロックです。ブロックは必ず長方形であり、丸いになったり、多角形になったりはしません。CSSは、この長方形をどのように並べるのか、それとも重ねるのか、マージンやパディングはどれぐらい取るのかを指定しているに過ぎません。ですので、フレックスボックスのようなボックスレベルでの配置をどのように指定しても、テキストが下に回り込むようなL字の形のボックスを作ることはできません。


そもそも、ブロック内部に干渉してテキストを回り込むようにできるのはフロート(float:left;float:right;)を使った場合のみです。このフロートであってもブロックの考え方は同じです。ただ、フロートの特徴として、フローのブロックは他のブロックに重なる形で右または左に配置されま、、フロートのブロック部分(マージン含む)を避けて、他のブロック内部のインラインの要素(テキスト含む)が配置されるという処理を行っているということです。これにより、テキストが下に回り込むような処理を実現にしています。この場合でも、テキストのあるブロックは長方形のままであり、単に、インラインなテキストがフロート部分を避けるように表示されると言うだけになります。

1
  • 「上記のようなイメージで合ってますでしょうか?」はい、合っています。
    – re9
    Commented 3月22日 11:23

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。