Html CSS设置元素的宽度

我试图将一个元素进度的宽度设置为其他两个元素之间的宽度。下面是我正在使用的HTML代码

      <span class="current_rank"><?php echo $this->current_rank;?></span>
      <div class="progress">
        <div class="progress-bar" role="progressbar"></div>
      </div>
      <span class="next_rank"><?php echo $this->next_rank;?></span>

---

有几种只使用CSS的解决方案，但这实际上取决于浏览器兼容性方面的要求

CSS calc函数-如果您知道跨度元素的宽度（绝对宽度或百分比宽度），则可以使用它。例如：宽度：calc100%-200px或calc80%。此解决方案适用于IE9+、Chrome和FF

---

使用显示：flex；并证明你的内容是正确的。你可以阅读更多关于它的内容。您不需要知道跨距的宽度，但此解决方案仅在IE10+、Chrome和FF中兼容。

您需要展示您的尝试。我建议发布你的css样式将css添加到原始的postall中，因为css看起来与我无关。类别VIP_排名在标记中指定。当前排名和下一个排名没有在css中指定！！！我把它弄乱了一点，它成功了！谢谢我最终使用了显示器：flex；

.progress {
  width: 550px;
  height: 15px;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: #666;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 15px;
  color: #333;
  text-align: center;
  background-color: #ffd700;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
          transition: width 0.6s ease;
}

.VIP_ranking > .current_rank {
  margin-left: 30px;
  margin-right: 25px;
}

.VIP_ranking > .next_rank {
  float: right;
  margin-right: 22.5px;
}

.VIP_ranking > div.progress{
  position:absolute;
  display:inline;
  margin-left: 10px;
}