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/

高度的

- 给定严格的文档类型 - 您还可以将height: 100%;设置为html，body，#container和.item以及{{1} } width:100%元素，因此它们将始终适合整个视口

Answer 2

你也可以使用jQuery来测量内部元素的宽度，计算它们并为父容器分配相应的宽度（比如n * m，其中n - 子元素的数量，m - 它们的宽度）。

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

2 个答案: