使用javascript计算宽度并调整css

我正在使用javascript计算红色和黄色的宽度，并使用css进行设计。html是：

宽度随数据的变化而动态变化，并在数据发生任何变化时进行计算。我在下面附上了三张图片，这将使我更容易理解我的意思。对于第一幅图像，当宽度之和大于100%时，黄色位于红色下方。绿色背景是灰色的宽度。我希望当宽度之和增加100%时，黄色不应低于红色，而是应该像第二幅图像一样，具有视觉指示，可能是点线，在点处，100%的限制像第三幅图像一样被跨越。希望这有助于解释我的问题

红色和黄色大于100%>

红色和黄色等于100%>

<div id="gray">
   <div id="red"></div>
   <div id="yellow"></div>
</div>

根据你的更新

---

这样会有+/-1的误差。但它要好得多。

我用以下方法：

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);

var rem=Math.round(100-(futureNum + recNum));
if(rem<0){
    $('#red').css('width',config.Used+'px');            
    $('#yellow').css('width',config.Usage+'px');
    $('#gray').css('width',(futureNum + recNum)+'px');
}else{
    $('#red').css('width',config.Used+'%');         
    $('#yellow').css('width',config.Usage+'%');
}

---

如果您有更好的建议，我们将不胜感激。

请发布您目前掌握的代码。此外，如果您愿意的话，请提供一个快速的草图，展示它的外观示例possible@RoryMcCrossan更新了我的代码和图片你的意思是说config.Usage+config.Used超过100。对吧?对。在这种情况下，如何调整宽度并像第三张图像一样显示此方法重新计算红色的宽度为41.67%，黄色的宽度为45%，而根据数据，最初红色的宽度为58.33%，黄色的宽度为48.33%。我不想改变这个宽度，而是想办法显示config.Usage+config.Used extra width之和，当它超过100时，作为第三个图像。希望我很清楚

<div id="gray">
   <div id="red"></div>
   <div id="yellow"></div>
</div>

var w_red=$("#red").outerWidth(true);
var w_yellow=$("#yellow").outerWidth(true);
$("#gray").width(w_red+w_yellow);

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);
var factor=1.0;
if( (config.Usage + config.Used)>100 )
{
 factor=(config.Usage + config.Used)/100;
 config.Usage= Math.round(config.Usage / factor);
 config.Used=100-config.Usage;
}


$('#red').css('width',config.Used+'%');         
$('#yellow').css('width',config.Usage+'%');

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);

var rem=Math.round(100-(futureNum + recNum));
if(rem<0){
    $('#red').css('width',config.Used+'px');            
    $('#yellow').css('width',config.Usage+'px');
    $('#gray').css('width',(futureNum + recNum)+'px');
}else{
    $('#red').css('width',config.Used+'%');         
    $('#yellow').css('width',config.Usage+'%');
}