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

Question

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

我有一个宽度= 90％的完整.box

在那个框中我有.progress div，宽度= 100

在.progress div中我得到了.left-free div 10％，。progdlebar 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％或只删除边框进度条