如何将此文本与图像对齐？（在堆栈溢出上浏览太久，解决方案似乎不起作用）

Question

所以基本上，我已经坚持了一段时间，不确定这个问题是否非常明显，因为我不是来自前端开发背景。

但本质上，我正在尝试设计模仿 youtube 实时聊天设计的东西（构建一个集成了 youtube 实时聊天的 OBS 插件 API）。页面的 JsFiddle 可以在这里看到 -> jsfiddle demo

不要介意边界，我只是用它来帮助我可视化我的 div 的边界。但我的问题是如何让带有用户名和评论的文本直接对齐到 pfp 图片旁边。

我试过使用浮动、弹性框、内联属性等。但它们似乎不起作用，我也不确定我是否正确使用它们，因为我不是前端 Web 开发人员，我的css 的知识只是通过堆栈溢出和一些 google 搜索。

我的理想结果是尽可能接近这样的目标：

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

Answer 1

请为图像和段落使用带有一些边距的 flex

   .message {
      display:flex
    }

Answer 2

因此，您可以使用浮动、弹性和网格实现相同的效果。

我刚刚编辑了您的 JSFiddle，并使用 flex 实现了一个解决方案。检查一下 here.

您可以添加一些填充以使框看起来更好。

.message { 
  display: flex;
  align-items: center;
}

.profile-pic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

如何将此文本与图像对齐？（在堆栈溢出上浏览太久，解决方案似乎不起作用）

How do I align this text next to the image? (been browsing too long on stack overflow, and the solutions don't seem to work)

html

css

web-deployment

web-frontend

web

如何将此文本与图像对齐？ （在堆栈溢出上浏览太久，解决方案似乎不起作用）

How do I align this text next to the image? (been browsing too long on stack overflow, and the solutions don't seem to work)

html

css

web-deployment

web-frontend

web

如何将此文本与图像对齐？（在堆栈溢出上浏览太久，解决方案似乎不起作用）