Резиновый список товаров

[boilroom]

Здравствуйте.

Попробую описать внятно суть моей проблемы:

Есть таблица, ширина которой зависит от ширины окна браузера. Например, она равна 60% от ширины окна.

Есть некоторая минимальная ширина одной ячейки таблицы. Допустим, что 200px.

Мне нужно, чтобы было так:

Когда ширина таблицы 900px - отображаются 4 ячейки по 225px, когда 801px - четыре по 200px, а когда ширина таблицы становится 799px - должны отображаться 3 ячейки по 266px. Ну, и так далее.

Реализацию видел на ozon.ru - там собственно список товаров так работает. Но принцип не пойму. И так пытался, и эдак - не выходит.

Помогите пожалуйста.

[Softlink]

Думается мне, что такого функционала не сделать только одним CSS. Отрезать не влезающие ячейки, допустим, не проблема, но как при этом растянуть оставшиеся - непонятно.

Еще где-то на форуме SelenIT предлагал(если не изменяет память) какой-то хитрый вариант с перескоками ячеек. Но найти пока не удалось.

[psywalker]

Здравствуйте.

Попробую описать внятно суть моей проблемы:

Есть таблица, ширина которой зависит от ширины окна браузера. Например, она равна 60% от ширины окна.

Есть некоторая минимальная ширина одной ячейки таблицы. Допустим, что 200px.

Мне нужно, чтобы было так:

Когда ширина таблицы 900px - отображаются 4 ячейки по 225px, когда 801px - четыре по 200px, а когда ширина таблицы становится 799px - должны отображаться 3 ячейки по 266px. Ну, и так далее.

Реализацию видел на ozon.ru - там собственно список товаров так работает. Но принцип не пойму. И так пытался, и эдак - не выходит.

Помогите пожалуйста.

У таблицы не могут исчезать просто так ячейки. Это же таблица)

Я могу предложить троечку решений.

1) Одно из них - это просто обрезать таблицу, с помощью overflow: hidden;, т.е. обернуть её в блок и он будет её обрезать потихонечку.

2) Задача решается 100% с помощью CSS3. и @media screen , но не пашет в ИЕ6-8.

3) Задача решается 100%, если сделать пункт 2, а для ИЕ6-8 написать мини скрипт, поместить его в условные комменты, что сделает решение вашей задачи минимально-затратной.

[boilroom]

Всем большое спасибо.

Пересилил себя и полез разбираться. Собственно первый тест был такой: отключить яваскрипт в браузере и открыть озон.ру и страницу Лебедева.

У Лебедева список работ на главной странице себя ведет так, как было описано в открытии темы. Итог: ни там, ни там без JS все это не работает.

У Лебедева не отображается список вообще, а озон ведет себя как таблица с шестью колонками.

В общем, если бы у Лебедева работало без JS, я бы еще побился (из принципа), а так можно честно написать скрипт. И вслучае чего махать рукой в его

сторону. Лебедева то есть.

P.S. Пока думал, родил вот такое элементарное решение: http://rushmore.ru/test/funny_block.php Может кому пригодится. Блоки скачут, вот только ширину свою автоматически не подгоняют.

За кроссбраузерность не отвечаю. В IE8 работает, в FF работает.

Edited November 8, 2011 by boilroom

[Lucifer]

Блоки скачут, вот только ширину свою автоматически не подгоняют.

Они исчезают...или так и задумывалось?

Я задачу понял так, что они на другую строку должны переноситься.

[Softlink]

2) Задача решается 100% с помощью CSS3. и @media screen , но не пашет в ИЕ6-8.

Макс, сможешь показать? Любопытно стало.

P.S. Пока думал, родил вот такое элементарное решение: http://rushmore.ru/test/funny_block.php Может кому пригодится. Блоки скачут, вот только ширину свою автоматически не подгоняют.

За кроссбраузерность не отвечаю. В IE8 работает, в FF работает.

Так это же и не таблица

[boilroom]

Так это же и не таблица

Согласен. Не таблица)

2) Задача решается 100% с помощью CSS3. и @media screen , но не пашет в ИЕ6-8.

Тоже хочу посмотреть.

Они исчезают...или так и задумывалось?

Я задачу понял так, что они на другую строку должны переноситься.

Нет-нет. Вы нумерацию посмотрите - они переносятся на вторую строку, все как надо. Просто все происходит в только пределах внешнего дива-обертки. Увеличте высоту дива с классом container и получите перенос на 3 строки. Или на 5. Ну и.т.д. А те блоки, которые не помещаются целиком в пределах контейнера, понятно, исчезают.

Edited November 8, 2011 by boilroom

[Lucifer]

Нет-нет. Вы нумерацию посмотрите - они переносятся на вторую строку, все как надо. Просто все происходит в только пределах внешнего дива-обертки.

Пардон за невнимательность.

[SelenIT]

Хм, я когда-то такое решал? Забавно... совсем не помню

Но на медиа-запросах действительно решается несложно (в опред. пределах, как и всё, с медиа-запросами связанное).

[psywalker]

Хм, я когда-то такое решал? Забавно... совсем не помню

Но на медиа-запросах действительно решается несложно (в опред. пределах, как и всё, с медиа-запросами связанное).

Ага, именно такой вариант я и имел ввиду.

[Softlink]

Хм, я когда-то такое решал? Забавно... совсем не помню

Но на медиа-запросах действительно решается несложно (в опред. пределах, как и всё, с медиа-запросами связанное).

Хм, я когда-то такое решал? Забавно... совсем не помню

Но на медиа-запросах действительно решается несложно (в опред. пределах, как и всё, с медиа-запросами связанное).

Ага, именно такой вариант я и имел ввиду.

Значит память мне с кем-то изменила))

Так это, на таблицах же надобно. Мы же про таблички говорим. И автор написал именно про таблицу.

[boilroom]

Так это, на таблицах же надобно. Мы же про таблички говорим. И автор написал именно про таблицу.

Не-не, автор берет свои слова обратно))

Я про таблицы махнул неглядя, потому что решил, что так это реализовано там, где я смотрел исходный код.

Да и вообще, спать надо было, а не в сорсах рыться.

Мне подошло бы и решение с дивами и с чем угодно. Это моё кривое заспанное объяснение виновато.

Медиазапросы посмотрел. Большое спасибо за наводку, буду иметь их ввиду.