一個可行的思路是，那個紅色的標簽由于是不固定寬度的，因此它自身不要絕對定位，而是給它外面再增加一層，這增加的一層div進行絕對定位。絕對定位的元素只用作容器，設置為能容納最大的標簽寬度。

題主可以參考一下這段代碼：

<div class="total-container">
  <div class="item">
    <div class="image-placeholder"></div>
    <div class="label-container">
      <span class="label">獎率10%</span>
    </div>
  </div>
  <div class="item">
    <div class="image-placeholder"></div>
    <div class="label-container">
      <span class="label">獎率</span>
    </div>
  </div>
  <div class="item">
    <div class="image-placeholder"></div>
    <div class="label-container">
      <span class="label">返獎率10%</span>
    </div>
  </div></div>

.total-container{

  width: 400px;

  min-height: 100px;

  margin: 20px auto;

  padding: 20px;

  border: 1px dotted #369;

  overflow: hidden;

}

.item{

  position: relative;

  margin-right: 20px;

  float: left;

}

.image-placeholder{

  width: 70px;

  height: 70px;

  background: #9fa8da;

  border-radius: 50%;

}

.label-container{

  position: absolute;

  width: 200%;

  left: -50%;

  top: 50px;

  text-align: center;

}

.label{

  display: inline-block;

  height: 24px;

  padding: 0 20px;

  border-radius: 15px;

  background: #d32f2f;

  color: #fff;

  font-size: 12px;

  line-height: 24px;

}

效果是：