javascript - CSS:动态宽度div

Question

我正在编写一个 slider ，但我对容器的样式有疑问。

我有 3 个 div:

1. 设置 slider 宽度和高度的div
2. 一个容器 div，包含所有内容 div(以及 slider 的滚动条)
3. 许多div每个显示不同的内容

我想做的是在第二个 div 上应用负边距来滑动内容。

实例:http://jsbin.com/efuyix/7/edit

JS:

  function animate(element) {
  var start = new Date();
  var id = setInterval(function() {
    var timePassed = new Date() - start;
    var progress = timePassed / 600;
    if (progress > 1) progress = 1;
    element.style.marginLeft = -50 * Math.pow(progress, 5)+"px";
    if (progress == 1) {
      clearInterval(id);
    }
  }, 10);
}

CSS

  .example_path {
    overflow: hidden;
    width: 50px;
    height: 50px;
  }
  .example_block {
    min-width: 100px;
    height: 50px;
    float:left;
   }
  .example_in_block {
    width: 50px;
    height: 50px;
    float:left;
   }

HTML

<div class="example_path">
  <div class="example_block" onclick="animate(this)">
    <div class="example_in_block" style="background-color:blue;"></div>
    <div class="example_in_block" style="background-color:pink;"></div>
    <div style="clear:both;"></div>
  </div>
</div>

问题:.example_block 的宽度必须完全相同或大于(内容 div 的数量 .example_block * 50 [内容 div 的宽度大小])才能工作。

例如，如果我将 .example_block 的宽度设置为 90，则粉色 div 将位于蓝色 div 下方，而不是在其旁边。

我希望容器 div 是动态的，这样我就不必设置特定的宽度大小。

我该怎么做？

Answer 1

只需删除 .example_block 中的 float:left。

参见 http://jsbin.com/efuyix/9/edit