レスポンシブ画像とテキスト Div を並べて表示

Question

だから、1 つの div が画像で、もう 1 つが背景付きのテキストであるテンプレートを作成しようとしています。次に、このテンプレートをレスポンシブにして、テキストが特定のピクセル幅で画像の下に表示されるようにしたいと思います。 stackoverflow を調べてみると、Flexbox を使用するべきだという投稿が無数にありました。試してみましたが、完全には理解できませんでした。

デスクトップでは次のようになります: https://i.stack.imgur.com/HDehv.jpg スマートフォンでは、ここ https://i.stack.imgur.com/D4VOh にジャンプするはずです。 .jpg

少なくともデスクトップ版では両側に余白が必要です。今私の問題は、Web サイト上で画像に制限がなく、サイズが大きくなりすぎて、行への自動切り替えが発生していることです (私の知る限り)。

私のコードはここにあります: https://jsfiddle.net/wqesp83a/

リーリー リーリー

div と画像の幅と高さを制限しようとしましたが、役に立たないか、全体をさらに分割することになります。誰かが私の間違いを見つけるのを手伝ってくれたら、とても感謝します。

Answer 1

grid 助けに来てください:

リーリー

幅 400 ピクセルまで拡張できる限り、コンテナーの子ごとにグリッド列が作成されます。幅 400 ピクセルのグリッド項目を配置するのに十分なスペースがない場合、グリッド項目は列に折り返されます。 px の値を任意の値に置き換えるだけです。

grid-auto-rows: 1fr は 2 つの列の高さを等しくします。

リーリー リーリー