DIV水平而不是垂直滚动项目？

Question

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

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

<div id="container">
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
</div>

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

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

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

Answer 1

你可能只是给white-space: nowrap到容器中,并display: inline-block;和white-space: normal每一个.item元素

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

对于高度-鉴于严格的DOCTYPE -您也可以设置height: 100%;到html,body,#container和.item和width:100%对.item元素,因此他们总是会适应整个视