ボックスのタイトルを下にもっていきたい。
ボックスのタイトルを下にもっていきたい。 【css】 .box27 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; } .box27 .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box27 p { margin: 0; padding: 0; } 【html】 <div class="box27"> <span class="box-title">ここにタイトル</span> <p>ここに文章</p> </div> で、画像上のようになるのですが、これを画像下のようにタイトルが下につくようにするにはどうすればいいでしょうか？ よろしくお願いします。 【参照URL】 https://saruwakakun.com/html-css/reference/box
HTML、CSS | JavaScript・10閲覧
ベストアンサー
yuy********さん >････タイトルが下につくようにする････････ ご参考に↓ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box27 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; } .box27 .box-title { position: absolute; display: inline-block; bottom: -27px; /* 修正 */ left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 0 0 5px 5px; /* 修正 */ } .box27 p { margin: 0; padding: 0; } </style> </head> <body> <div class="box27"> <span class="box-title">ここにタイトル</span> <p>ここに文章</p> </div> </body> </html>
質問者からのお礼コメント
お二方ありがとうございました。 2種類試してどちらもうまくいったのですが、今回はどのような変更かを挙げられ、またhtmlの変更がなかったyppさんをベストアンサーにさせていただきます。 sanさんのやり方もデザイン的にそんなことができるのか、と学ぶことができました。 両者ありがとうございました！
お礼日時：1/22 17:58
