模仿dtcms图片和文字并排效果

<style type="text/css">

*{margin:0;padding:0;}

.progress{height:30px;line-height:30px;margin:10px 0;border-radius:30px;background-color:#eee;border:1px #ccc solid;overflow:hidden;}

.pro-wid{width:30%;height:100%;background-color:#3191d6;text-align:right;}

.pro-num{color:#fff;padding-right:5px;}

</style>

<div class="outer">

<span style="width:200px;float:left;">555555555555</span>

<div class="progress" style="">

<p class="pro-wid" >

<span class="pro-num">30%</span>

</p>

</div>

<p>overflow:hidden起的作用，放在子元素里就能和dtcms一样的效果，另外，outer加上position:relative;是有区别的</p>

</div>