国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

レスポンシブ畫像とテキスト Div を並べて表示
P粉005134685
P粉005134685 2024-04-02 08:59:38
0
1
647

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

P粉005134685
P粉005134685

全員に返信(1)
P粉130097898

grid 助けに來てください:

リーリー

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

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

リーリー リーリー
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート