水平而不是垂直滚动DIV中的项目？ [英] Scrolling items in DIV horizontally instead of vertically?

问题描述

有没有人知道一个有效的方法来浮动元素，使它们在一个容器中水平滚动，反对垂直？

Does anyone know of an effective way to float elements so that they scroll horizontally in a container as oppose to vertically?

例如，我有这个布局：

<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>

我理解如果我给容器定义的高度和宽度，浮动，使容器将水平滚动。

I understand that if I give "container" a defined height and width, all "items" can be made to float so that "container" will scroll horizontally.

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

But what about if I don't know how many "items" there will be? If I don't know the number of items then I don't how wide container should be...

有任何想法或建议吗？只有CSS的建议是理想的，但我不反对使用jQuery插件，如果任何人有任何建议。

Any thoughts or suggestions? CSS-only suggestions would be ideal but I'm not opposed to using a jQuery plugin if anyone has any suggestions.

推荐答案

可以只给 white-space：nowrap 到容器和 display：inline-block; 和白空间：正常到每个 .item 元素

you may just give white-space: nowrap to the container and display: inline-block; and white-space: normal to every .item element

不需要预先知道所有元素的总宽度，或通过javascript / jQuery计算。然后你应该调整内联块元素之间的差距（有几种方法来实现这一点：参见 http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Doing so you won't need to previously know the total width of all elements, or calculate it via javascript/jQuery. Then you should just adjust the gap between inline-blocks elements (there're several methods to achieve this: see http://css-tricks.com/fighting-the-space-between-inline-block-elements/

为高度&给定严格的doctype—您还可以设置 height：100％; 到 html ， body ， #container 和 .item c $ c> width：100％到 .item 元素，以便它们始终适合整个视口

for the height — given a strict doctype — you may also set height: 100%; to html, body, #container and .item and width:100% to .item elements so they will always fit the whole viewport

这篇关于水平而不是垂直滚动DIV中的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！