html - 如何将框内的文本移动到特定位置

所以我正在尝试使文字靠近图像，也许距离2px。一个人怎么做？在框内移动文本，图像甚至按钮的最佳方法是什么。在我想要的位置。（我附上了现在的样子，我一直在W3学校玩耍）

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      width: 80%;
    }

    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .container {
      padding: 2px 150px;
      float: right;
    }
  </style>
</head>

<body>

  <h2>Card</h2>

  <div class="card">
    <img src="img_avatar.png" alt="Avatar" style="width:40%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>

</body>

</html>

最佳答案

您可以在包含的div上使用flex：

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 80%;
  display: flex;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  flex-grow:1; /* this make the container grow to fill the rest of the row */
  padding-left:10px; /* this is your gap between picture and text */
}

<h2>Card</h2>

<div class="card">
  <img src="https://www.fillmurray.com/g/200/300" alt="Avatar" style="width:40%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>

关于html - 如何将框内的文本移动到特定位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53066566/