确定可变宽度父级中可以包含多少固定大小的子对象

Question

我认为这很简单，但我很难过。我正在开发一个页面底部运行不良的页面。左边是左箭头，右边是右箭头。介于两者之间的空间将填充缩略图。

我正在努力找出用缩略图填充空间的最佳方法，理想情况下我不想要任何“空白区域”，但我也不希望任何重叠。我想知道我是否应该使用javascript来确定div的像素大小，然后在javascript中使用while循环。您认为有更简单的选择吗？

非常感谢提前

我在http://jsfiddle.net/MHeqG/149/

有一个jsfiddle

HTML：

<div>
    <div id="left">
        left
    </div>
    <div id="right">
    right
    </div>
    <div id="middle">
      <div id="child">
      child
      </div>
      <div id="child">
      child 2
      </div>
      <div id="child">
      child 3
      </div>
    </div>

</div>

CSS：

#left {
    float:left;
    width:67px;
    background-color:#ff0000;
}
#middle {
    width: 100%;
    background-color:#00FF00;
}
#right {
    float:right;
    width:67px;
    background-color:#ff5500;
}
#child{
    float:left;
    width:50px;
    background-color:#ff5500;
    border: 1px solid #000000;
    height: 50px;
    width: 50px;

}