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?

For example, let's say I have this layout:

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

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.

回答1:

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

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/

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

回答2:

You can also use jQuery to measure the width of inner elements, count them and assing corresponding width to the parent container (like n * m, where n - number of child elements, m - their width).

来源：https://stackoverflow.com/questions/17427265/scrolling-items-in-div-horizontally-instead-of-vertically

标签

jquery

css

html

stylesheet