Question

我试图将元素progress的宽度设置为两个其他元素之间的宽度。这是我正在使用的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>

我正在尝试将进度条的宽度设置为两个<span>'s之间的宽度这有可能用CSS吗？

更新

.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;
}

Answer 1

有几种仅限CSS的解决方案，但它确实取决于浏览器兼容性方面的要求。

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

使用display：flex;并为你的内容辩护。您可以阅读更多相关信息here。您不需要知道跨度的宽度，但此解决方案仅在IE10 +，Chrome和FF中兼容。

CSS设置元素的宽度

1 个答案: