css - 我应该使用什么 CSS 来创建一系列水平的、非环绕的 block ？

Question

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

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

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

其他基于 CSS 的选项？

Answer 1

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

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

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