CSS：動態寬度div

Question

我正在編碼一個滑塊，但容器的樣式存在問題。

我有3 div ：

1. 設置滑塊寬度和高度的div
2. 具有所有內容div的容器div （以及滑塊的滾動）
3. 許多div各自顯示不同的內容

我想做的是在第二個div上應用負邊距來滑動內容。

LIVE示例： 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

Answer 2

沒有負利潤。 您可能可以在外部DIV之一上設置填充。

而且，最小寬度不會與IE的較早版本向后兼容。

檢查此示例： http : //jsfiddle.net/5xBYN/6/

如果初始定位良好，則可以在容器DIV（第三個DIV）的頂部，左側，右側或底部使用負值以實現滑動。

更新：

也許這更接近您想要的。 http://jsfiddle.net/5xBYN/7/

我仍然不確定您要做什么。 也許編輯我發布的小提琴，並用什么地方弄錯了我的問題來更新您的問題。