左右圆角矩形，中间背景为橙色的长方矩形，红色百分比的长度定位在中间的矩形left，根据数据改变红色百分比长度

实践思路

两种解决方案，简单和繁琐。

1. 一个背景图片，用定位来显示百分比。

2. 左右写两个盒子。

代码思路

第一种：
给父级加个定位position: relative;
在加一个背景颜色。用css3-moz-linear-gradient
样例：background: -moz-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 50%, #ffffff 100%); /* FF3.6-15 */
给每个span都分别定位position: absolute;定位按照设计图走。
每个span都不要背景颜色。

另外我span的命名都是瞎起的，你运用到自己的项目中，要起含义一致的。
其他的，我觉得就是ajax请求，并把获得的数据覆盖上。

关于百分比的参数，你可以跟后台沟通，可以直接让他把对应的值告诉你，你在把获取的值，拼到样式里。这个就需要你跟后台人员对接了。

<p>
    <p>
        <span class="floatL">购买支持</span>
        <span class="leftNum">60%</span>
        <span class="rightNum">40%</span>
        <span class="floatR">购买支持</span>
        <p class="clear"></p>
    </p>
</p>

第二种：
给浮动的两个p分别写一种不同颜色的背景。其他的就没有什么区别了。

<p>
    <p>
        <p style="float:left;">
            <span class="floatL">购买支持</span>
            <span class="leftNum">60%</span>
        <p>
        </p style="float:right;">
            <span class="rightNum">40%</span>
            <span class="floatR">购买支持</span>
        </p>
        <p class="clear"></p>
    </p>
</p>

左右两个圆角矩形，中间一左一右两个矩形，利用js改变宽度，保持总宽度不变

赞同楼上说的方法，当支持比例发生变化时，动态数据改变两者长度

两个p分别存放两张背景图，一张放在另一张上面，设置上面 那个p的宽度就好了

突然好奇有个问题，两者的色素不会滚到 两边的 圆角矩形里面吗？比例都是在中间变的？如果不是那我就觉得楼上的布局说法，就不靠谱了。