html - 使div彼此正下方

Question

我试图做到这一点，如果我复制并粘贴一个 div，粘贴的 div 会出现在我复制的那个 div 的正下方。这是我的代码:

.friend {
  position: relative;
  text-decoration: none;
}

<a class="friend" href="#1">
  <div class="user-status" id="friend-status"></div>
  <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png">
  <h5 id="friend-name">Jane Doe</h5>
</a>
<a class="friend" href="#2">
  <div class="user-status" id="friend-status"></div>
  <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png">
  <h5 id="friend-name">Jane Doe</h5>
</a>
<a class="friend" href="#3">
  <div class="user-status" id="friend-status"></div>
  <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png">
  <h5 id="friend-name">Jane Doe</h5>
</a>

这是现在的样子:

我正在尝试缩小 .friend div 之间的间距，以便它们在垂直方向上靠得更近。它们必须具有相同的类。

Answer 1

如果您只想在每个 friend 元素之间设置一个“动态”1px 间距，那么添加以下 CSS 即可

.friend:not(:last-of-type) {
  margin-bottom: 1px;
}

This will add a bottom margin of 1px to all the .friend elements except the last one. So even if you copy pasta the element, the spacing will be automatically present.