造型进度条 - 计算宽度

我有以下代码：造型进度条 - 计算宽度

.mod-prb { 
 
    display: block; 
 
    width: 250px; 
 
    height: 35px; 
 
    border: 2px solid #809097; 
 
    border-radius: 8px; 
 
    padding: 3px; 
 
} 
 
.mod-prb > div { 
 
    display: block; 
 
    height: 20px; 
 
    height: 30px; 
 
    border: inherit; 
 
    border-radius: 8px; 
 
    text-align: right; 
 
    padding: 0 10px; 
 
}

<div class="mod mod-prb"> 
 
    <div class="perc"></div> 
 
</div>

的问题是<div class="perc">可以达到width:95%;。我将如何去计算像素，以便我可以使用JS 1％-100％。澄清：我用JS添加宽度，所以这不是问题。

来源

2015-10-19 Milos

请添加更多细节。很难理解你想要达到的目标。 –

'.mod-prb> div'被分配了带有JS的百分数的'width'。现在，问题是我有一些跨度，并且，例如，如果我应用'width：98％'，则'.mod-prb> div'不能放入'mod-prb'中。所以，我问的是：如何使'宽度：100％''.mod-prb> div'适合'.mod-prb'。 – Milos

所以你想要的是避免内箱超过外箱的宽度。我现在弄错了吗？ –

为什么发生这种情况

这个问题发生，因为你的宽度设置为100％，但其内盒也有10px的的填充（左，右）和2像素的边界。这使得它的父宽度为+ 20px（两边为10px）+ 4px（两边为2px边框）的实际宽度为100％。

如何修复

你可以解决它以不同的方式。最简单的一个是使用box-sizing与border-box一个值：

的宽度和高度属性包括填充和边界，而不是幅度。

的代码应该是这样的（注意height如何改变太）：

.mod-prb { 
 
    display: block; 
 
    width: 250px; 
 
    height: 35px; 
 
    border: 2px solid #809097; 
 
    border-radius: 8px; 
 
    padding: 3px; 
 
} 
 
.mod-prb > div { 
 
    display: block; 
 
    height: 35px; 
 
    width:100%; 
 
    border: inherit; 
 
    border-radius: 8px; 
 
    text-align: right; 
 
    padding: 0 10px; 
 
    box-sizing:border-box; 
 
}

<div class="mod mod-prb"> 
 
    <div class="perc"></div> 
 
</div>

来源

2015-10-20 02:51:04

太棒了，谢谢！ – Milos

造型进度条 - 计算宽度

回答

相关问题