Html DIV 中的水平滚动，里面有许多小 DIV（无文本）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6431101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal scroll in DIV with many small DIV's inside (no text)
提问by Jonas B
Objective
客观的
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 downoutside the main DIV. I want them instead to disappear to the right.
我有一个固定高度和宽度的主 DIV，我希望有很多小 DIV 可以自由浮动。我有更多的小 DIV，无法放入主 DIV。然后，它似乎在默认情况下是消失的小DIV的下降主要DIV之外。我希望它们消失在右边。
I want to trigger a horizontal scrollbar, but no vertical.
我想触发水平滚动条，但没有垂直滚动条。
Background
背景
I tested this with white-space: nowrapas described at http://www.webmasterworld.com/forum83/8844.htm
我white-space: nowrap按照http://www.webmasterworld.com/forum83/8844.htm 中的描述对此进行了测试
And it works perfect if I have only text or images in the main DIV.
如果我在主 DIV 中只有文本或图像，它就完美无缺。
Question
题
But how do I do when the main DIV contains only small DIV's?
但是当主 DIV 只包含小 DIV 时我该怎么办？
回答by Xavier
I have done this using jQuery, HTML and CSS:
我已经使用 jQuery、HTML 和 CSS 做到了这一点：
HTML
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>
CSS
CSS
#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;
}
jQuery
jQuery
$(function(){
var width = 0;
$('#overflow .container div').each(function() {
width += $(this).outerWidth( true );
});
$('#overflow .container').css('width', width + "px");
alert(width);
});
});
Basically the div can not use a fluid width in CSS as width is applied inherently from the parent div.
基本上 div 不能在 CSS 中使用流体宽度，因为宽度是从父 div 固有地应用的。
Using some jQuery code you can attach the width to the containing div easily.
使用一些 jQuery 代码，您可以轻松地将宽度附加到包含的 div。
Here is the fiddle with the final code.
OR
或者
Use a fixed width on the container div i.e. #overflow .container { width : 1880px }
在容器 div 上使用固定宽度，即 #overflow .container { width : 1880px }
回答by pat8719
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.
将较小的 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>
