在DIV中水平滚动项目而不是垂直滚动?

有没有人知道浮动元素的有效方法,以便它们在容器中水平滚动而与垂直方向相反?

例如,假设我有这样的布局:

something
something
something
something
something

据我所知,如果我给“容器”一个定义的高度和宽度,所有“项目”都可以浮动,以便“容器”将水平滚动。

但是,如果我不知道会有多少“项目”呢? 如果我不知道物品的数量,那么我不知道容器应该多宽……

有什么想法或建议吗? 仅CSS的建议是理想的,但我不反对使用jQuery插件,如果有人有任何建议。

你可以给white-space: nowrap到容器并display: inline-block;white-space: normal每个.item元素都是white-space: normal

这样做您不需要事先知道所有元素的总宽度,也不需要通过javascript / jQuery计算它。 然后你应该调整内联块元素之间的差距(有几种方法可以实现这一点:请参阅http://css-tricks.com/fighting-the-space-between-inline-block-elements/

对于高度 – 给定严格的doctype – 你也可以设置height: 100%;htmlbody#container .item.item以及width:100%.item元素,所以它们总是适合整个视口

您还可以使用jQuery来测量内部元素的宽度,计算它们并为父容器分配相应的宽度(如n * m,其中n – 子元素的数量,m – 它们的宽度)。