Html 如何在图像的两侧相应地放置文本？

这很简单。我只需要把两行文字放在一个图像的两侧，该图像位于我的登录页的中心。除了使用

position:absolute

之外，我不知道如何使其响应。如何在不使用

位置：绝对值的情况下执行此操作

我尝试使用flexbox，但它似乎不允许我自由地调整文本的位置，因为这些项目实际上彼此相邻

以下是使用flexbox的代码：

<div class="overall">
  <div class="hi">
    <p>OH <br>GOSH <br> HI!</p>
  </div>
  <div class="human-container">
    <img src="img/landing page human.svg" onmouseover="this.src='img/landing page human 2.svg'"
      onmouseout="this.src='img/landing page human.svg'">
  </div>
  <div class="my-name">
    <p>MY<br> NAME<br> IS <span class="Ray">Ray</span></p>
  </div>
</div>


哦
天啊
嗨

我的名字是雷

我只需遵循以下步骤：

-将“float:left；”添加到以下类：“.total”、“.hi”、“.human container”和“.my name”

-在img中添加一个id（#），并给它一个float:left；宽度：100%；也是。

-给班级一个宽度：5%

-给“人类容器”一个宽度：90%

-给班级“我的名字”一个宽度：5%。


这应该可以做到

：D
我只需遵循以下步骤：

-将“float:left；”添加到以下类：“.total”、“.hi”、“.human container”和“.my name”

-在img中添加一个id（#），并给它一个float:left；宽度：100%；也是。

-给班级一个宽度：5%

-给“人类容器”一个宽度：90%

-给班级“我的名字”一个宽度：5%。


这应该可以做到

：D
请添加一些代码，并描述哪些代码不适合您。制作一个最小的，有效的例子，我们可以重现你的问题。我刚刚编辑了我的文章。我无法在中添加Css部分，因为我仍然不知道如何使用flexbox使其工作…@hùng nguyễn mạnh至少试着用一些图像或scetch来表示你想要它的样子，确切地说，你想要它的样子。我很抱歉没有透明：（我有一个图像，它放在我登陆页面第一部分的中心，名为“人类容器”。在图像的任一侧，我只想在左侧和右侧显示一行“Hi”右侧的“我的名字是雷”：（更好吗？）这是我第一次在这个帖子上提问，所以我仍然不擅长如何描述我想做的事情。请添加一些代码，并描述对你不起作用的事情。制作一个最小的、有效的示例，我们可以重现你的问题。我刚刚编辑了我的帖子。我无法添加Css部分，因为我仍然无法理解我们要用flexbox来完成这项工作…@hùng nguyễn mạnh至少试着用一些图像或scetch来表示你想要它的样子，确切地说，你想要它的样子。beI很抱歉没有透明：（我有一个图像，它放在我登陆页面第一部分的中心，名为“人类容器”。在图像的任一侧，我只想要左边的“Hi”行和“我的名字是“雷”（在右边）：（好点了吗？）这是我第一次在这个帖子上提问，所以我仍然不擅长如何描述我想做的事情，所以我认为我没有正确描述它是不好的。所以我想在左边写“嗨”和“我的名字是雷”“在图像的右侧，当我缩小屏幕时，它们都在一行……不客气！：D（介意在向上投票的箭头下方选择“右”作为我的答案吗？这对我来说意义重大-谢谢！）哦，所以我认为我没有正确描述它是不好的。所以我想在左侧选择“嗨”和“我的名字是雷”在图像右侧，当我缩小屏幕时，它们都在一行中…你是受欢迎的人！：D（介意在向上投票箭头下方选择我的答案为“右”吗？这对我来说意义重大-谢谢！）