Question

所以我正在尝试使文字靠近图像，也许距离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>

Answer 1

您可以在包含的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>

Answer 2

布局设计的方式有很多。只需弄清楚您想做什么，然后实施您选择的方法即可。您的选择包括网格，弹性框和绝对定位元素。我在下面给出了一个简单的示例代码段，其中使用flexbox在列方向上放置了文本，然后分别在flexbox中对齐元素。例如，我将h4标签设置为与某些填充向左对齐，以在图像和h4标签之间留出间隙。

同样，有很多不同的方法可以解决这个问题。尝试几种不同的方法并进行实验，以找到最适合您的方法。

.card{
   background-color: salmon;
   height: 150px;
   display: flex;
   justify-content: space-between
}
.card_wrap_right{
   background-color: lightblue;
   width: 50%;
   position: relative;
   display: flex;
   flex-direction: column;
}
.card_wrap_right>h4{
   align-self: left;
   padding-left: 10px;
}
.card_wrap_right>p{
   align-self: center;
}

<body>
  <h2>Card Title</h2>
  <div class="card">
    <span class='card_image'> IMAGE HERE </span>
    <div class="card_wrap_right">
      <h4>JOHN DOE</h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
</body>

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

2 个答案: