Question

我正在对滑块进行编码，而且我对容器的样式有问题。

我有3 div：

设置滑块宽度和高度的div
包含所有内容div的容器div（以及滑块的滚动）
许多显示不同内容的div

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

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上设置填充。

此外，min-width不会向后兼容旧版本的IE。

选中此示例：http://jsfiddle.net/5xBYN/6/

如果初始定位良好，则可以在容器DIV（第三个DIV）上使用负值，用于顶部，左侧，右侧或底部以实现滑动。

更新：

也许这更接近你想要的。 http://jsfiddle.net/5xBYN/7/

我仍然不确定你要做什么。也许编辑我发布的小提琴并用我遇到的错误更新你的问题。

CSS：动态宽度div

2 个答案: