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