だから、1 つの div が畫像で、もう 1 つが背景付きのテキストであるテンプレートを作成しようとしています。次に、このテンプレートをレスポンシブにして、テキストが特定のピクセル幅で畫像の下に表示されるようにしたいと思います。 stackoverflow を調(diào)べてみると、Flexbox を使用するべきだという投稿が無數(shù)にありました。試してみましたが、完全には理解できませんでした。
デスクトップでは次のようになります: https://i.stack.imgur.com/HDehv.jpg スマートフォンでは、ここ https://i.stack.imgur.com/D4VOh にジャンプするはずです。 .jpg
少なくともデスクトップ版では両側(cè)に余白が必要です。今私の問題は、Web サイト上で畫像に制限がなく、サイズが大きくなりすぎて、行への自動切り替えが発生していることです (私の知る限り)。
私のコードはここにあります: https://jsfiddle.net/wqesp83a/
リーリー リーリー
div と畫像の幅と高さを制限しようとしましたが、役に立たないか、全體をさらに分割することになります。誰かが私の間違いを見つけるのを手伝ってくれたら、とても感謝します。
grid
助けに來てください:
幅 400 ピクセルまで拡張できる限り、コンテナーの子ごとにグリッド列が作成されます。幅 400 ピクセルのグリッド項目を配置するのに十分なスペースがない場合、グリッド項目は列に折り返されます。 px
の値を任意の値に置き換えるだけです。
grid-auto-rows: 1fr
は 2 つの列の高さを等しくします。