0

有谁知道浮动元素的有效方法，以便它们在容器中水平滚动而不是垂直滚动？

例如，假设我有这个布局：

<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 插件。

4

2 回答 2

5

你可以只给white-space: nowrap容器display: inline-block;和white-space: normal每个.item元素

这样做你不需要事先知道所有元素的总宽度，或者通过 javascript/jQuery 计算它。然后你应该调整 inline-blocks 元素之间的间隙（有几种方法可以实现这一点：参见http://css-tricks.com/fighting-the-space-between-inline-block-elements/

对于高度——给定一个严格的文档类型——你也可以将元素设置height: 100%;为html, body, #containerand .item，这样它们将始终适合整个视口width:100%.item

于 2013-07-02T13:47:03.233 回答
0

您还可以使用 jQuery 来测量内部元素的宽度，对它们进行计数并将相应的宽度分配给父容器（例如 n * m，其中 n - 子元素的数量，m - 它们的宽度）。

于 2013-07-02T13:49:03.620 回答