具有百分比宽度的 DIV 不起作用（无边框，无边距/填充）

Question

我创建了自己的进度条并遇到了一些问题

我有一个宽度为 90% 的完整 .box

在那个盒子里，我有一个宽度为 100 的 .progress div

在 .progress div 中，我得到了 .left-free div 10%、.progressbar 80%、.right-free 100%

在 .progressbar 我有 4 个 div .grey 30%、.violet 30%、.brown 30%、.blank 0%

问题是不知道为什么 .grey、.violet、.brown 的大小不一样！

编辑：（.blank div 只是一个分隔符.. 一切都很好。）

我不使用边距或填充或任何边框。 .progressbar 周围的边框是用 box-shadow 实现的。

我的 html 代码：

<div id="box">

    <div id="progress">

        <div class="left-free">10% free</div>

        <div class="progressbar">
            <div class="grey" style="width:30%">30%</div>
            <div class="violet" style="width:30%">30%</div>
            <div class="brown" style="width:30%">30%</div>
            <div class="blank" style="width:0%">0%</div>
        </div>

        <div class="right-free">10% free</div>

    </div>

</div> 

我的 CSS 代码：

body
    {
        width:100%;
        background-color:#eee;
        padding:0;
        margin:0 auto;
    }
#box
    {
        width:90%;
        padding:0;
        margin:2% auto;
        background-color:#eee;
    }
#progress
    {
        width:100%;
        padding:0;
        margin-bottom:10%;
    }    
.left-free
    {          
        width:10%;
        float:left;
        box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 1);         /* right */
    }
.progressbar
        {
            position:relative;
            width:80%;
            float:left;
            background-color:#ffffff;
            box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 1),         /* top */
                        inset 0px -1px 0px rgba(0, 0, 0, 1);         /* bottom */
        }
.grey {background-color:grey;}
.violet  {background-color:violet;}
.brown  {background-color:brown;}
.blank {background-color:#ffffff;}

.grey,
.violet,
.brown,
.blank
    {
        height:100px;                                            
        float:left;
        margin-top:1px;
    }

.left-free,
.progressbar,
.right-free
    {
        height:102px;                                           
    }
.right-free
    {
        width:10%;
        float:left;
        box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 1);         /* border left */
        text-align:right;
    }

我创建了一个屏幕截图，并在所有 3 个框上放置了一个宽度相同的绿色条！ 在 .violet 和 .brown div 的右端有一个垫片（希望你能在图片上看到它）

这里有一个更好的视野

你可以在jsfiddle看到运行代码

第二个例子：jsfiddle 2

知道为什么这些盒子的尺寸不同吗？

编辑：我将html上传到pastebin

Answer 1

将灰色和棕色宽度更改为 30.1% 或仅移除边框进度条