Здравствуйте, друзья!

Требуется ваша помощь в решении одной задачи.

Дело в следующем:

Имеется список товаров, задача выводить по три товара в ряд
Рядов может быть сколько угодно.

Условия:
Есть один div для контейнера, содержащего товары.
И есть div'ы товаров. Все имеет фиксированную ширину.
Вспомогательные дивы и классы для рядов и товаров использовать нельзя.

Т.е. конструкци имеет вид:






Я столкнулся с проблемой создания отступов между вторым дивом каждого ряда.
Очень рассчитываю на вашу помощь (в крайнем случае напишите что в заданных условиях решения нет, и я буду искать обходные пути)

Заранее, спасибо!

Примерно так:

Только рассчитайте ширину родительского дива, потому как при ширине 640рх три в ряд по 200рх, да и с отступами в 20рх никак не влезет, учитывая, что задавать дополнителные классы низя.

@olldman,

Большое спасибо!
Но к сожалению это не совсем то что нужно.

Требуется сделать именно как на рисунке (мой косяк, плохо объяснил):

Чтобы отступы были только у среднего продукта в каждом ряду, а первый и третий продукты плотно прилегали к границам контейнера.

Добавлено через 3 минуты и 27 секунд
Я пока решил это только через задания дополнительного div'a для каждого ряда.
В таком случае ставим всем .product внутри ряда - padding-left: 20px;
А :first-child'у - padding-left: 0;

Но очень хочется обойтись без отдельных рядов, если это возможно.

Насколько я понимаю, то у вас формируются блоки программно, если да, то может лучше попробовать в массиве прописать дополнительные классы?
Иначе я, увы, выхода не вижу  

Именно так, и добавить назначение дополнительного класса, который будет убирать отступ, для каждого третьего продукта - не проблема.

Но мне интересно способен ли html справится с такой, казалось бы простой задачей, не прибегая к дополнительным телодвижениям.

Проверить возможности чистой верстки, если угодно :)

Maroon, ну например padding-left такой-то. А родительский блок margin-left: -СТОЛЬКО_ТОpx; В общем что-то в таком духе.

Добавлено через 12 минут и 30 секунд

Ну это разве что при таком условии.

InfMaq, спасибо!

Но дело как раз в том что хочется обойтись без <div class="productsSubContainer">, т.е. не добавляя никаких дополнительных блоков.
Сдвигать margin'ом основной контейнер тоже не получится т.к. необходимо его четкое позиционирование относительно всей страницы.

Решил вашу проблему:

Как видите есть правда некий div.breaker - он нужен, чтобы фон родительского блока не оборвался. Если фон не принципиален — можно убрать.

Добавлено через 5 минут и 1 секунду
Можно и вместо float: display: inline-block:

Но как видите придётся анигилировать пробелы и переводы строк, ибо они тоже как inline-block-и воспринимается что-ли или как правильней объяснить, в данном случае они анигилированы комментариями.

Спасибо! Совсем забыл про :nth-child

Но тут тоже есть свой минус - этот селектор доступен только в ксс3 и ИЕ вплоть до 8ой версии его не понимает.

Даже обидно что такое полезное свойство появилось так поздно в спецификации.

Это сообщение отредактировал(а) Maroon - 5.6.2011, 21:15

Maroon, скажите, у вас откуда это задание? Или сами для себя и развития придумали.
Просто если вы хотите рассчитывать на такие браузеры средства для скачивания нормальных браузеров, вроде ie7, а в особенности ie6, то ставлю 99%, что это технически не реализуемо. Из опыта говорю, подобные задачи встречал не раз. Либо дополнительные блоки, либо сосём лапу, такова политика IE. Нет, ну конечно вы можете в HEAD прописать Conditional Tags и там загружать скрипты, expressions (css-js) и уже делать всё, что хотите JavaScript-ом, по-моему тоже адекватное решение, чтобы не мусорить в доме костылями для ie. Только если задача позволяет.

Добавлено через 3 минуты и 52 секунды
Maroon, 


Это сообщение отредактировал(а) InfMag - 5.6.2011, 21:17

Задание из реального проекта, но условия придумал я сам, некий спортивный интерес.

Тоже сталкивался с подобными задачами не раз и всегда решал либо дополнительными блоками, либо дополнительными классами. В этот раз захотелось проверить есть ли более изящное решение.

Вот то, о чём я говорил 


Добавлено через 3 минуты и 43 секунды
Maroon, можно вообще плагин написать для изоляции от ie  Ну то-есть селекторы, которые им не поддерживаются. По ДОМ-риди парсить стили, находить элементы входящие в css3 и задавать их через JS. Причём при парсинге всего-то! Заменяем точку с запятой на запятую и оборачиваем между двоеточий и запятых в кавычки от-тримленые (trim) значения, и всё, JSON)

Большое спасибо!
Думаю так и поступлю 

Maroon, успехов!

- отличный пример, только div.breaker там лишний, достаточно прописать для .productsContainer overflow:hidden;