问题描述
|
目的
我有一个固定高度和宽度的主DIV，并且我想让许多小型DIV自由漂浮。我的小型DIV超过了主DIV的容量。然后，默认情况下，似乎是小DIV的消失在主DIV之外。我希望它们反而消失在右边。
我想触发水平滚动条，但不触发垂直滚动条。
背景
如http://www.webmasterworld.com/forum83/8844.htm所述，我使用ѭ0进行了测试
如果我的主DIV中只有文本或图像，它会非常完美。
题
但是，当主DIV仅包含小DIV时，该怎么办？
解决方法
像这样，将较小的div包裹在宽度大于主div的第三个div中。假设我正确理解了您的问题，则不需要jquery。
<html>
<head>
<style type=\"text/css\">
.div_1
{
height: 350px;
width: 350px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}
.div_3
{
float: left;
height: 350px;
width: 500px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}
.div_2
{
height: 100px;
width: 100px;
border: 1px solid #A2A2A2;
float: left;
}
</style>
</head>
<body>
<div class=\"div_1\">
<div class=\"div_3\">
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
<div class=\"div_2\"></div>
</div>
</div>
</body>
</html>
<div id=\"overflow\">
<div class=\"container\">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
#overflow{
border: 1px solid #000;
height: 220px;
width: 220px;
overflow-x: scroll;
overflow-y: hidden;
}
#overflow .container div{
border: 1px solid #CCC;
float: left;
width: 200px;
height: 200px;
}
$(function(){
var width = 0;
$(\'#overflow .container div\').each(function() {
width += $(this).outerWidth( true );
});
$(\'#overflow .container\').css(\'width\',width + \"px\");
alert(width);
});
});
#overflow .container { width : 1880px }