html - 具有百分比宽度的 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% 或仅删除边框进度条