CSSの「display:flex;」で、
画像の高さを超えるまでは、画像の左にテキストを表示。
画像の高さを超えた地点から、画像の下にもテキストを表示する方法はありますか?
1 件の回答
<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;
)を使った場合のみです。このフロートであってもブロックの考え方は同じです。ただ、フロートの特徴として、フローのブロックは他のブロックに重なる形で右または左に配置されま、、フロートのブロック部分(マージン含む)を避けて、他のブロック内部のインラインの要素(テキスト含む)が配置されるという処理を行っているということです。これにより、テキストが下に回り込むような処理を実現にしています。この場合でも、テキストのあるブロックは長方形のままであり、単に、インラインなテキストがフロート部分を避けるように表示されると言うだけになります。
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?