html - 为什么,如果我应用 display inline-block 属性,我的 HTML 元素是从底部开始的?
问题描述
我想生成像组件一样的评论列表,因为我已经采用了 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
顺利!干杯。
推荐阅读
- android - 打开特定的文件扩展名
- javascript - 将类添加到引导轮播项目
- amazon-web-services - 我可以使用 Rancher HA 设置执行滚动升级吗
- swift - 如何找到字符串中重复的确切单词的范围(区分大小写)
- git - 本地回购提交不更新 Github - Github 页面上的 Jekyll 站点
- sql - 如何将此 ER 图转换为表格?
- c# - 每次调用类时都会覆盖值
- unity3d - 如果触摸了 UI 按钮以外的任何内容,则开始游戏
- javascript - 无法使用内容脚本将 SVG 图标注入页面
- ios - 共享实例 + 实例方法 vs 静态方法