Я хочу сгенерировать список комментариев как компонент, для этого я взял div и применил блок отображения и встроенный блок соответственно. Но я не знаю, почему мой HTML-элемент начинается с самой нижней позиции (если вы увеличиваете или уменьшаете, вы можете понять это). Просьба помочь в этом отношении.
.comment { color: red; } .imagePanel, .textPanel, .userName, .timeStamp { display: inline-block; } .userImage { width: 60px; } .userName a { font-size: 18px; font-weight: 800; color: unset; margin-right: 5px; }
<div className='mainCommentPanel'> <div className='imagePanel'> <img className="userImage" src='https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png' alt='userImage' /> </div> <div className="textPanel"> <div className="UserBox"> <div className="userName"><a>User Name</a></div> <div className="timeStamp">{new Date().toLocaleTimeString()}</div> </div> <div className="comment"> <p>This page is very cool!</p> </div> </div> </div>
Элемент должен начинаться с самой верхней позиции в упомянутых свойствах высоты и ширины.
Для inline-block, по умолчанию для vertical-align установлено значение baseline, установите для него значение vertical-align: top, и все будет хорошо! Приветствия.
inline-block
vertical-align
baseline
vertical-align: top
.comment { color: red; } .imagePanel, .textPanel, .userName, .timeStamp { display: inline-block; } .userImage { width: 60px; } .userName a { font-size: 18px; font-weight: 800; color: unset; margin-right: 5px; } .imagePanel{ vertical-align:top; }
<div class='mainCommentPanel'> <div class='imagePanel'> <img class="userImage" src='https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png' alt='userImage' /> </div> <div class="textPanel"> <div class="UserBox"> <div class="userName"><a>User Name</a></div> <div class="timeStamp">{new Date().toLocaleTimeString()}</div> </div> <div class="comment"> <p>This page is very cool!</p> <p>This page is very cool!</p> <p>This page is very cool!</p> <p>This page is very cool!</p> <p>This page is very cool!</p> </div> </div> </div>
Вы должны использовать атрибут класса вместо className.