Почему мой HTML-элемент начинается снизу, если я применяю свойство display inline-block? - PullRequest
0 голосов
/ 03 июня 2019

Я хочу сгенерировать список комментариев как компонент, для этого я взял 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>

Элемент должен начинаться с самой верхней позиции в упомянутых свойствах высоты и ширины.

Ответы [ 2 ]

2 голосов
/ 03 июня 2019

Для inline-block, по умолчанию для vertical-align установлено значение baseline, установите для него значение vertical-align: top, и все будет хорошо! Приветствия.

0 голосов
/ 03 июня 2019

.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.

...