我正在编写一个 slider ,但我对容器的样式有疑问。
我有 3 个 div
:
- 设置 slider 宽度和高度的
div
- 一个容器
div
,包含所有内容 div(以及 slider 的滚动条) - 许多
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 是动态的,这样我就不必设置特定的宽度大小。
我该怎么做?
最佳答案
只需删除 .example_block 中的 float:left。
关于javascript - CSS:动态宽度div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8149843/