宽度动态div容器
[英]Width Dynamic div container
问题描述
im in the process of building a slider and i have a problem with the styling , 
即时通讯正在构建滑块，而我在样式方面存在问题，
I have 3 layers of divs , 我有3层div，
- First div to set the width and height of the slider 第一个div设置滑块的宽度和高度
- second div to be container of the content , on this div i do all the action 第二个div是内容的容器，在这个div上我执行所有操作
- Content divs 内容div
First there is a live example with the code : http://jsbin.com/efuyix/8/edit#javascript,html,live 首先，有一个带有代码的实时示例： http : //jsbin.com/efuyix/8/edit#javascript,html,live
Or here : 或者在这里：
<!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>
So , what is the problem? 那么，是什么问题呢？
the width of the Container div must be big enough to contain all the Content divs perfectly , Container div的宽度必须足够大以完美地包含所有Content div，
for example if i have 3 divs of Content inside the Container , i need the Container to be at least set with 150px width (because the Content div width is 50px) else it will be messing up and line break 例如，如果我在Container内有3个div内容，则我需要将Container的宽度至少设置为150px（因为Content div的宽度为50px），否则会弄乱行并换行
If the Container is not big enough , the Contents divs will line break and all the slider will be messed up , must to know is that i don't know how many Content divs will be print into the Container div , so the Container div must contain all of them without line breaking and somehow to be dynamic 如果Container不够大，则Contents div将换行，所有滑块将被弄乱，必须知道我不知道将多少Content div打印到Container div中，因此Container div必须包含所有它们而没有换行，并且以某种方式是动态的
how can i fix it? 我该如何解决？ thank you in advance!! 先感谢您！！
1 个解决方案
解决方案1
1 已采纳 2011-11-16 16:58:09
On .content , replace float: left with display: inline-block . 在.content ，将float: left替换为display: inline-block 。
Then, add white-space: nowrap to #container . 然后，将white-space: nowrap添加到#container 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.