所以本质上来说，我已经被困在这个问题上有一段时间了，不确定这个问题是否非常明显，因为我不是来自前端开发的背景。
但从本质上说，我试图设计一个模仿youtube live chat设计的东西（构建一个集成youtube live chat API的OBS插件）。页面的JsFiddle可以在这里看到->JsFiddle demo
不要介意边界，我只是使用它来帮助我可视化我的div的边界。但我这里的问题是，我如何让带有用户名和注释的文本直接对齐到pfp图像旁边。
我试过使用float、flexboxs、inline properties等，但它们似乎都不起作用，我也不确定我是否正确地使用了它们，因为我不是一个前端web开发人员，我对css的了解只是通过堆栈溢出和一些谷歌搜索。
null
.messageBox {
position: absolute;
width: 300px;
height: 500px;
border: 1px solid #d1d1d1;
overflow-y: auto;
}
.messageBox .header {
position: absolute;
width: 100%;
height: 50px;
border-bottom: 1px solid #d1d1d1;
}
.messageBox .header p {
position: absolute;
margin-left: 15px;
font-family: 'Roboto', sans-serif;
}
.messageBox .content {
width: 95%;
position: absolute;
top: 50px;
height: auto;
border: 1px solid green;
}
.messageBox .content .message {
margin: 10px;
border: 1px solid red;
font-family: 'Roboto', sans-serif;
font-size: small;
}
.messageBox .content .message .pfp {
width: 25px;
border-radius: 500px;
margin-right: 10px;
}
.messageBox .content .message .text{
margin-left: 15px;
}
.messageBox .content .message .text span{
color: #747474;
margin-right: 5px;
}<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="messageBox">
<div class="header">
<p>Live Chat Replay</p>
</div>
<div class="content">
<div class="message">
<img class="pfp" src="https://yt3.ggpht.com/ytc/AAUvwnjDRW6z60q7Db1fOB8-fHRjz4HcW_d-_sa9Ow=s88-c-k-c0x00ffffff-no-rj"/>
<p class="text"><span>Michael Collins</span>Hello world, this is a test message</p>
</div>
</div>
</div>
<!-- End your code here -->
</body>
</html>null
请为图像和段落使用带有一些边距的flex
.message {
display:flex
}
因此，您可以使用floats、flex和Grid实现相同的功能。
我刚刚编辑了您的JSFiddle并使用Flex实现了一个解决方案。查一下这里。
您可以添加一些填充物以使盒子看起来更好。
.message {
display: flex;
align-items: center;
}
.profile-pic {
width: 30px;
height: 30px;
border-radius: 50%;
}
