Какой CSS я должен использовать, чтобы создать серию горизонтальных, не обертывающих блоков?

Question

У меня есть набор динамически генерируемого контента - от 1 до 25 блоков (каждый из которых я хочу иметь ширину около 250 пикселей.

Понятно, что это может работать вне экрана, но это нормально, так как мой дизайн допускает горизонтальную прокрутку (используя jQuery - я не хочу, чтобы браузер делал это с собственными полосами прокрутки).

Так какой CSS - кросс-браузерный - лучший подход? Кажется, что плавающие объекты ненадежно переносятся, а динамический характер содержимого, которое часто изменяется с помощью вызовов ajax, означает, что пересчет ширины контейнера не очень практичен.

Другой вариант на основе CSS?

Answer 1

#container { 
  overflow-x: auto; 
  white-space: nowrap; 

  width: XXXpx; height: XXXpx;
}
#container .block { 
  float: left; 
}

Параметр overflow-x обеспечит полосу прокрутки, если содержимое выходит за пределы ширины, параметр white-space обеспечит отображение всего содержимого в одной строке.

Answer 2

Вот похожий вопрос

Почему бы не использовать таблицу из одной строки, несмотря на стандарты?

Поскольку, если вы не сделаете элемент контейнера фиксированной ширины, все эти пробельные и строковые элементы не будут работать, поэтому содержимое также будет перенесено. И если я не знаю фактическую ширину галереи (которую я не могу знать, насколько контент добавляется динамически), я не могу указать ее ширину вот так.

Answer 3

Используйте контейнер div с набором абсолютных значений, разрешите overlow и плавает для каждого блока. Это позволит окнам переполняться с правой стороны экрана.

Answer 4

кроме плавает? Столы: D Серьезно, используйте поплавки.