水平滚动在DIV与许多小DIV的里面（没有文本） [英] Horizontal scroll in DIV with many small DIV's inside (no text)
问题描述
我有一个固定高度和宽度的主DIV，我想要有很多小DIV可以自由浮动。我有更多的小DIV的可以适合在主DIV。然后看起来默认情况下是消失小DIV的下以外的主DIV。我想让它们向右消失。
I have a main DIV with fixed height and width, and in that I want have lots of small DIV's to float freely. I have more small DIV's than can fit in the main DIV. Then it seems that by default is disappear small DIV's down outside the main DIV. I want them instead to disappear to the right.
我想触发一个水平滚动条，但没有垂直。
I want to trigger a horizontal scrollbar, but no vertical.
我用 white-space：nowrap ，如 http://www.webmasterworld.com/forum83/8844.htm
如果我只有主要DIV中的文本或图像，它的工作原理。
And it works perfect if I have only text or images in the main DIV.
但是当主DIV只包含小DIV时，该如何处理？
But how do I do when the main DIV contains only small DIV's?
推荐答案
将较小的div包含在第三个div中，它的宽度比主div大。假设我正确地理解你的问题，不需要jquery。
Wrap your smaller divs in a third div that has a greater width than your main div like so. Assuming I understood your question correctly no jquery is needed.
<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与许多小DIV的里面（没有文本）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
