[英]Width Dynamic div container
即時通訊正在構建滑塊，而我在樣式方面存在問題，
我有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內容，則我需要將Container的寬度至少設置為150px（因為Content div的寬度為50px），否則會弄亂行並換行
如果Container不夠大，則Contents div將換行，所有滑塊將被弄亂，必須知道我不知道將多少Content div打印到Container div中，因此Container div必須包含所有它們而沒有換行，並且以某種方式是動態的
我該如何解決？ 先感謝您！！
在.content ，將float: left替換為display: inline-block 。
然后，將white-space: nowrap添加到#container 。
在100％寬度容器內居中div，左右浮動寬度
[英]Center div inside 100% width container with dynamic width left and right floats
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.