我创建了自己的进度条并遇到了一些问题
我有一个完整的.box,宽度=90%
在那个盒子里我有宽度= 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