如何获得固定的浮动DIV
我有一个固定的高度和宽度（275x1000像素）的容器DIV。 在这个DIV中，我想放置多个浮动DIV，每个宽度为300px，并且水平（x轴）滚动条看起来允许用户向左和向右滚动以查看所有内容。
这是我的CSS到目前为止：
div#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
div#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
问题是浮动DIV不会超过容器的宽度。 在放置三个浮动DIV之后，它们将继续在下面。 如果我将overflow-y更改为auto，则会出现垂直滚动条，然后我可以向下滚动。
我怎样才能改变这种做法，让浮动的DIV继续运行而不会互相影响？
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
这里的诀窍是，只有默认情况下内联行为的元素在Internet Explorer中设置为内联块时才会正常工作，因此内部容器需要<span>而不是<div>。
您需要一个宽度较大的额外div来包含这些块，然后它们将比容器div更宽，而不是下拉到新行。
HTML：
<div id="container">
<div id="width">
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<!-- more blocks here -->
</div>
</div>
CSS：
#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#container #width {
width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
#row {
white-space: nowrap; /* important */
overflow: auto;
}
.items {
display: inline-block;
}<div id="row">
<div class="items">
<img src="//placehold.it/200/100" alt="item 1" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 2" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 3" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 4" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 5" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 6" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 7" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 8" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 9" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 10" />
</div>
</div>