我应该使用什么 CSS 来创建一系列水平的非环绕块？答案

【问题标题】：What CSS should I use to create a series of horizontal, non-wrapping blocks?我应该使用什么 CSS 来创建一系列水平的非环绕块？
【发布时间】：2010-06-01 09:21:28
【问题描述】：

我有一组动态生成的内容 - 介于 1 到大约 25 个块之间（我希望每个块的宽度约为 250 像素。

显然，这可以在屏幕外运行，但这很好，因为我的设计允许水平滚动（使用 jQuery - 我不希望浏览器使用自己的滚动条来实现）。

那么，什么 CSS - 跨浏览器 - 是最好的方法？浮动似乎不可靠地包装，并且通过 ajax 调用频繁更改的内容的动态特性意味着重新计算容器宽度不是很实用。

其他基于 CSS 的选项？

【问题讨论】：

您不会重新计算容器的宽度以使您的水平 jQuery 滚动正常工作吗？

标签： css horizontal-scrolling

【解决方案1】：

#container { 
  overflow-x: auto; 
  white-space: nowrap; 

  width: XXXpx; height: XXXpx;
}
#container .block { 
  float: left; 
}

如果内容超出宽度，overflow-x 设置将确保滚动条，white-space 设置将确保所有内容都在一行上。

【讨论】：

【解决方案2】：

使用设置了绝对宽度的 div 容器，允许超低，并为每个框浮动。这将允许框溢出屏幕右侧。

【讨论】：

我就是这样去的。这意味着计算宽度的额外步骤（因为框的数量可以改变），但似乎没有更好的解决方案。

【解决方案3】：

除了浮动？表：D 说真的，使用浮点数。

【讨论】：

【解决方案4】：

Here is a similar question

尽管有标准，为什么不使用单行表？

因为如果你不让容器元素固定宽度，所有那些空白和内联块元素都将不起作用，所以内容也会换行。如果我不知道画廊的实际宽度（我不知道，就动态添加的内容而言），我无法指定它的宽度。

【讨论】：