margin-top 効かない
|
1049750894 Show
1049750894さん 2021/9/24 14:27 22回答 margin-top: auto;が効かない理由って何でしょうか。 flexboxだと上手くいくのでflexboxにしないとできない理由がよく分かりません。margin-top: auto;が効かない理由って何でしょうか。 flexboxだと上手くいくのでflexboxにしないとできない理由がよく分かりません。 (調べたらインライン要素にしてるのが良くないとあったのですがインライン要素を使っていないので、、、) 下のhtml/cssはnavタグの要素をheader領域(height:200px)の一番下に持っていくプログラムです。 よろしくお願いします。 html logo 補足 物凄く紛らわしい質問の仕方をしてしまっていました。凄く細くて分かりやすい説明とサイトを用意してもらってありがとうございます。本当に申し訳ないですm(_ _)m 上のHTML文の display: flex; flex-direction: column; の2行を消して頂いてflexboxについては触れずに margin-top: auto；がブロック要素に効かない理屈を教えて頂きたいですm(_ _)m 例えでflexboxでは出来たのにって用いたつもりだったのですが、今見返したらflexboxを使うと何故下の方にNAVが行くのかと明らかに書いていて本当に私が馬鹿でした。 HTML、CSS・309閲覧 共感した ベストアンサーhttps://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q122499047020 ybb******** ybb********さん カテゴリマスター 2021/9/24 15:33 1049750894さん >････flexboxにしないとできない理由･･･････ flexbox で制御されないからです。 flexbox はレイアウトには必須ですから、早めによく勉強したら良いでしょう。 ご参考に https://creive.me/archives/15427/ https://www.flapism.jp/html/278/ logo ナイス！ ybb******** ybb********さん 2021/9/24 16:52 >････margin-top: auto；がブロック要素に効かない理屈･･･････ 貴方の勘違いです。 そもそも、margin-top: auto；では下に張り付きません。 ご参考に https://www.granfairs.com/blog/staff/centering-by-css flexを使わないなら、例えば、 ･･･････ header { position:relative; /* 追加 */ background-color: grey; height: 200px; } div{ background-color: red; } nav{ position:absolute; bottom:0; width:100%; /* 追加 */ background-color: rgb(136, 136, 221); } ･･･････ThanksImg質問者からのお礼コメント凄い下手な質問にも関わらず丁寧に教えてくれた御二方ありがとうございますm(_ _)m ベストアンサーは個人的に分かりやすかったので選ばせていただきました。まだまだ初学者なので御二方の説明凄く助かりましたm(_ _)mありがとうございます！ お礼日時：2021/9/24 17:32 ベストアンサーhttps://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q122499047020 ybb******** ybb********さん カテゴリマスター 2021/9/24 15:33 1049750894さん >････flexboxにしないとできない理由･･･････ flexbox で制御されないからです。 flexbox はレイアウトには必須ですから、早めによく勉強したら良いでしょう。 ご参考に https://creive.me/archives/15427/ https://www.flapism.jp/html/278/ logo ナイス！ ybb******** ybb********さん 2021/9/24 16:52 >････margin-top: auto；がブロック要素に効かない理屈･･･････ 貴方の勘違いです。 そもそも、margin-top: auto；では下に張り付きません。 ご参考に https://www.granfairs.com/blog/staff/centering-by-css flexを使わないなら、例えば、 ･･･････ header { position:relative; /* 追加 */ background-color: grey; height: 200px; } div{ background-color: red; } nav{ position:absolute; bottom:0; width:100%; /* 追加 */ background-color: rgb(136, 136, 221); } ･･･････ThanksImg質問者からのお礼コメント凄い下手な質問にも関わらず丁寧に教えてくれた御二方ありがとうございますm(_ _)m ベストアンサーは個人的に分かりやすかったので選ばせていただきました。まだまだ初学者なので御二方の説明凄く助かりましたm(_ _)mありがとうございます！ お礼日時：2021/9/24 17:32 CSS Grid Layoutについての質問です。 PC表示の際に特定のブロックを非表示にしておき、スマホの時だけ表示させたいのですが、詰めて表示されてしまい上手くいきません。 もし分かる方がいらっしゃれば、ご回答の程どうぞよろしくお願いいたします。 index.html header key main side1 side2 |
