我正在构建一个滑块，我的样式有问题，
我有3层div，
或者在这里：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
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);
}
</script>
<style type="text/css">
#slider {
overflow: hidden;
width: 50px;
height: 50px;
}
#container {
min-width: 100px;
height: 50px;
float:left;
}
.content {
width: 50px;
height: 50px;
float:left;
}
</style>
</head>
<body>
<div id="slider">
<div id="container" onclick="animate(this)">
<div class="content" style="background-color:blue;"></div>
<div class="content" style="background-color:pink;"></div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
那么，问题是什么？
Container div的宽度必须足够大才能完美地包含所有Content div，
例如，如果我在Container内有3个div内容，我需要容器至少设置为150px宽度（因为内容div宽度为50px）否则它将搞乱和换行
如果Container不够大，则内容div会断行，所有滑块都会搞砸，必须要知道的是我不知道有多少Content div会打印到Container div中，所以容器div必须包含所有这些而不会断行，并且某种程度上是动态的
我该如何解决？提前谢谢!!
答案 0 :(得分：1)
在.content上，将float: left替换为display: inline-block。
然后，将white-space: nowrap添加到#container。