添加内容后异常的内联块定位

Question

当我遇到这个问题时，我正在使用内联块元素。下面是元素的预期布局。这只是简单的卡片，在它后面有一个伪元素的位置。

预期布局：

​

​

​

.deck-list-container{
  background-color: rgba(0, 0, 100, 0.2);
}

.deck-list-item {
  padding: 5pt;
  position: relative;
  cursor: pointer;
  margin: 10pt;
  display: inline-block;
  background-color: white;
  border-radius: 0.8rem;
  height: 15rem;
  width: 10rem;
}

.deck-list-item:after {
  content: '';
  position: absolute;
  background-color: yellow;
  transform: translateY(0.5rem);
  height: 3rem;
  width: 2.5rem;
  right: 1rem;
  bottom: 0;
  clip-path: polygon(50% 25%, 100% 0, 100% 98%, 0 100%, 0 0);
}

<div class="deck-list-container">
  <div class="deck-list-add"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
</div>

​

然而，出于某种原因。当我在div.中添加一个元素时，这个布局中断了，我已经为这个问题分析了很长一段时间，但是我似乎被困住了。有人知道发生了什么事吗？

发行：

​

我试过以下几种方法：

移除:伪element

• adding框大小后: border-box

• removing位置:相对

Answer 1

您需要将.deck-list-item的.deck-list-item属性设置为baseline默认值以外的其他属性。例如top

​

.deck-list-container{
  background-color: rgba(0, 0, 100, 0.2);
}

.deck-list-item {
  padding: 5pt;
  position: relative;
  cursor: pointer;
  margin: 10pt;
  display: inline-block;
  background-color: white;
  border-radius: 0.8rem;
  height: 15rem;
  width: 10rem;
  vertical-align:top;
}

.deck-list-item:after {
  content: '';
  position: absolute;
  background-color: yellow;
  transform: translateY(0.5rem);
  height: 3rem;
  width: 2.5rem;
  right: 1rem;
  bottom: 0;
  clip-path: polygon(50% 25%, 100% 0, 100% 98%, 0 100%, 0 0);
}

<div class="deck-list-container">
  <div class="deck-list-add"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item">text</div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
</div>

​