Q&A
掲示板のコメント欄を作成しているのですが、ユーザーのプロフィール画像が思うように配置できません。
#picture-parentと#comment-bodyをinline-blockで横並びに配置したのですが、#picture-parentがコメント本文の下端位置に表示されてしまいます。
これをユーザーネームの横位置、つまり#commnet-boxの左端に固定したいです。
#comment-boxにposition: relative;を設定して、#picture-parentにposition: absolute; top: 0; left: 0;と設定することを試してみたのですが、この方法だとinline-blockが崩れてしまうようです。
何か良い方法はないでしょうか？
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="style.css"> 9 <title>Comment</title> 10</head> 11 12<body> 13 <div id="comment-box"> 14 <div id="picture-parent"> 15 <img src='https://pbs.twimg.com/profile_images/1301868742582759426/FhH3M92m_normal.jpg' id="user-picture"> 16 </div> 17 <div id="comment-body"> 18 <p>username</p> 19 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident dolorem rerum ullam sunt natus debitis sed quidem voluptates eaque! Modi possimus labore consequuntur, deserunt esse perferendis repellendus. Quis, perferendis maiores ut nostrum fugiat ab. Id ullam temporibus sed deserunt tempore possimus, vel autem adipisci similique hic dolores sint doloremque excepturi.</p> 20 </div> 21 </div> 22</body> 23 24</html>
css
1#picture-parent { 2 display: inline-block; 3} 4 5#user-picture { 6 width: 50px; 7 height: 50px; 8 border-radius: 50%; 9} 10 11#comment-body { 12 display: inline-block; 13 width: 80%; 14}
回答1件
0
ベストアンサー
#commnet-box の左上に配置したいということでしょうか。
css
1#picture-parent { 2 display: inline-block; 3 vertical-align: top; /*追加*/ 4}
最近はflexを使う場合が多いですね。
css
1#comment-box { 2 display: flex; 3} 4 5#picture-parent { 6 display: inline-block; 7}
投稿2020/09/06 13:30
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/08 03:50