html - 如何根据 div 中的文本调整 div 大小

Question

我有不同的 div，如下所示:

<div class="marker marker-availability" style="left: 975.516px; top: 346.265px;">
    <span class="marker-label">Tenten comfort</span>
    <div style="background-color:#7ba1bc" class="cluster-background">
        <span class="marker-id">81</span>
    </div>
</div>

<div class="marker marker-availability">
  <span class="marker-label">Standaard kampeerplaatsen</span>
  <div style="background-color:#d99200" class="cluster-background">
     <span class="marker-id">81</span>
  </div>
</div>

但现在我遇到了一个问题，因为我在图像底部设置了一个带有图像的 :after ，如下所示:

现在您已经很清楚地看到问题了，我尝试将 height 设置为 auto 并设置 min-height 但这并不能解决问题。

我重新创建了一个jsfiddle:jsfiddle

这是我的较少代码:

&.marker-availability {
  display: block;
  width: 120px;
  height: 23px;
  color: #fff;
  background-color: #6f6926;
  border: 2px solid #fff;
  border-radius: 2px;
  margin-left: -60px;
  margin-top: -26px;

  .marker-label {
    margin-top: 1px;
    margin-left: 1px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
  }

  .cluster-background {
    .square(25px);
    background-color: black;
    color: #fff;
    margin-top: -30px;
    margin-left: -12px;
    border-radius: 50%;


    &:after {
      .retina-image('/img/map/clustermarker-point.png', '/img/map/clustermarker-pointx2.png', 184px, 55px);
      .pos-b-l(-26px, 50%);
      .translate(-50%, -50%);
      content: "";
      display: block;
      width: 120px;
      height: 20px;
      background-repeat: no-repeat;
    }
  }

  .marker-id {
    padding-top: 1px;
    padding-left: 1px;
    font-size: 15px;
  }
}

因此，我的问题是有可能使它看起来像这样:

或者是因为:after image的位置而无法实现

Answer 1

问题主要在于负边距，如果可能的话应该避免。

我已经更新了您的示例，您只需调整填充:

https://jsfiddle.net/txsv0ha5/

删除:

    margin-top: -30px;
    margin-left: -12px;

此外，您的底部背景不应该是彩色圆圈的 :after 元素，而应该是整个标记本身。