ID非公開
ID非公開さん
2021/1/21 17:10
1回答
ｈ２（見出し）の横にボックスを設置したい。 初心者です。教えてください…。
ｈ２（見出し）の横にボックスを設置したい。 初心者です。教えてください…。 【現在のhtml】 <h2 class="head">ここの横に表示したい</h2> <div class="box1"><p>ボックス文章</p></div> 【現在のcss】 .box1 { padding: 0.5em 1em; margin: 2em 0; font-weight: bold; border: solid 3px #000000; float: right; } .box1 p { margin: 0; padding: 0; } となっていて、表示は画像①のようになっています。 これを画像②のように（h2の横にboxがくるように）するにはどうすればいいでしょうか？ .box1 { margin-top:-〇〇em;} をすればいけなくはないのですが、それだと汎用性が低くなってしまうのでカッコイイ?感じにしたいです。 といっても自分では知識不足すでできないのでどうかお助けください。 【参照サイト】 https://qiita.com/kazu56/items/05fb54e7e6b69c749c33 https://programming-study.com/technology/html-side-by-side/ https://saruwakakun.com/html-css/reference/box
ベストアンサー
基本的に .head { float: left; } でヘッダを左に寄せれば、その右側に次のブロックが配置されます。 ただ、box1 に margin: 2em 0; があるので、上マージンが合いません（この記述を消せばわかります）。 それなのに >.box1 { >margin-top:-〇〇em;} > >をすればいけなくはないのですが、それだと汎用性が低くなってしまう と言われても・・・とは思います（すでにmarigin-topがあり、そのせいで位置がピタリとは合わせられない）。
ID非公開
ID非公開さん
質問者
2021/1/21 17:36
