造型进度条 - 计算宽度
问题描述:
我有以下代码:造型进度条 - 计算宽度
.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添加宽度,所以这不是问题。
答
为什么发生这种情况
这个问题发生,因为你的宽度设置为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>
+0
太棒了,谢谢! – Milos
请添加更多细节。很难理解你想要达到的目标。 –
'.mod-prb> div'被分配了带有JS的百分数的'width'。现在,问题是我有一些跨度,并且,例如,如果我应用'width:98%',则'.mod-prb> div'不能放入'mod-prb'中。所以,我问的是:如何使'宽度:100%''.mod-prb> div'适合'.mod-prb'。 – Milos
所以你想要的是避免内箱超过外箱的宽度。我现在弄错了吗? –