Jon*_*s B 11 html css overflow horizontal-scrolling
我有一个固定高度和宽度的主DIV,我希望有很多小DIV可以自由浮动.我有更多的小型DIV,而不是主DIV.然后,它似乎在默认情况下是消失的小DIV的下降主要DIV之外.我希望他们反而消失在右边.
我想触发一个水平滚动条,但没有垂直.
我white-space: nowrap按照http://www.webmasterworld.com/forum83/8844.htm所述进行了测试
如果我在主DIV中只有文本或图像,那么它的工作非常完美.
但是当主DIV只包含小DIV时我该怎么办？
Xav*_*ier 17
我使用jQuery,HTML和CSS完成了这个:
<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);
});
});
基本上div不能在CSS中使用流体宽度,因为宽度是从父div固有地应用的.
使用一些jQuery代码,您可以轻松地将宽度附加到包含div.
在容器div上使用固定宽度即 #overflow .container { width : 1880px }
pat*_*719 13
将较小的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>