Question

我有不同的div＆＃39; s，如下所示：

<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设置为自动并设置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;
  }
}

因此，我的问题是可以使它看起来像这样：

或者由于：在图像之后的位置

，它是不可能的

Answer 1

问题主要是你的负利润，如果可能应该避免。

我已经更新了你的例子，你只需要调整填充：

https://jsfiddle.net/txsv0ha5/

删除：

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

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

Answer 2

你的css有些麻烦。

主要问题是否定margin。如果这样做，父级的所有高度都会减少。因此，您需要添加position:absolute。
将:after元素更改为父级，使其相对于父级而不连接到cluster-background。

.marker-availability {
  display: block;
  width: 120px;
  min-height: 23px;
  color: #fff;
  background-color: #6f6926;
  border: 2px solid #fff;
  border-radius: 2px;
  margin-top: 26px;
  position:absolute;
}
.marker-availability .marker-label {
  margin-top: 1px;
  margin-left: 1px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.marker-availability .cluster-background {
  width: 25px;
  height: 25px;
  background-color: black;
  color: #fff;
  margin-top: -50px;
  margin-left: -12px;
  border-radius: 50%;
  position:absolute;
}
.marker-availability:after {
  background: url('http://i65.tinypic.com/bhytdd.png');
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 120px;
  height: 20px;
  background-repeat: no-repeat;
}
.marker-availability .marker-id {
  padding-top: 1px;
  padding-left: 1px;
  font-size: 15px;
}

<body style="background-color: black">

  <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>
</body>

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

2 个答案: