css 根据不同屏幕设置间距_使用CSS实现div水平间距值的自动匹配

如何用CSS实现div之间自动分配宽度？我搜索了很多资料，但仍旧没有找到解决方法。

我创建了一个主div，宽度为100%，在内部又分成若干个div。大家可以看一下代码：http://jsfiddle.net/EAkLb/1/

HTML

inner box 1

inner box 2

inner box 3

inner box 4

CSS

iv.section_zone{

margin: 0 auto;

padding: 3px;

width: 80%;

position: relative;

overflow: auto;

text-align: center;

display: inline-block;

clear: both;

background-color: #fff;

border: 1px solid #000;

/* change border to be inside the box */

box-sizing:border-box;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

}

div.box_frame{

float: left;

background-color: #eee; /* standard background color */

border: 1px solid #898989;

border-radius: 11px;

padding: 2px;

margin: 0 5px;

text-align: center;

/* change border to be inside the box */

box-sizing:border-box;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

}

div.box_frame:first-child{

margin-left: 0;

}

div.box_frame:last-child{

margin-right: 0;

float: right;

}

div.box_frame#_15{ /* width 15% */

width: 20%;

}

我需要将内部的div之间留存相同的宽度。第一个div是左对齐，最后一个div同样是右对齐，中间的相互之间的宽度统一。需要用CSS自动分配，而不是手动去调试。

我自己写的代码实现的效果却是下图所示，中间的宽度不一致。

我想达成的效果如下图所示：

请注意：目前，我的代码是显示4个div，我希望解决方法可以支持不同的数量，比如2个，3个，4个等等。