如果我应用display inline-block属性，为什么我的HTML元素从底部开始？

Question

我想生成像组件这样的注释列表，为此我已经使用了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> 

元素应从其提到的height和width属性的最高位置开始。

Answer 1

对于inline-block ，默认情况下， vertical-align设置为baseline ，将其设置为vertical-align: top ，您会很高兴！ 干杯。

Answer 2

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

您必须使用class属性而不是className。