CSS设置元素的宽度

-3

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

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

来源

2014-06-10 Huludini

你需要显示你已经尝试过。我建议发布您的CSS样式 – Leo

添加CSS到原始帖子 – Huludini

所有这些CSS看起来与我无关。 VIP_ranking类是在你的标记中指定的。虽然'current_rank'和'next_rank'没有在你的CSS中指定！ – Leo

有好几只CSS的解决方案，但它实际上取决于什么要求，在浏览器的兼容性方面。

CSS计算函数 - 如果知道跨度元素的宽度，可以使用它，不管是绝对宽度还是以百分比表示的宽度。例如：width：calc（100％ - 200px）或calc（80％）。此解决方案将在IE9 +，Chrome和FF中工作使用display：flex;并为您的内容辩护。你可以阅读更多关于它here。您不需要知道跨度的宽度，但此解决方案只能在IE10 +，Chrome和FF中兼容。

来源

2014-06-10 01:10:46 sagibb

我搞砸了一下，它的工作！谢谢！我结束了使用'display：flex;' – Huludini

CSS设置元素的宽度

回答

相关问题