Как занять блоками всю ширину родителя

[Xerol]

Вот такая задачка появилась.

1. Есть контейнер резиновой ширины.

2. Есть блоки (например заметка с картинкой) в контейнере, их количество - любое от 1 до бесконечности. Реально надо обрабатывать хотя бы до 10. Количество блоков заранее не известно.

3. Блоки должны выводиться в контейнере равной ширины и занимать всю ширину контейнера.

4. (самое сложное) У блоков должна быть минимальная ширина: если контейнер сильно сужается, не влезающие блоки должны переноситься на следующую строку.

Последний пункт отметает вариант с table-cell. Указать ширину в % тоже нельзя - ведь заранее количество блоков не известно.

Вариант с justify + inline-block тоже не подходит, потому что блоки занимают не всю ширину, а их ширина зависит от содержания.

Если бы блоков было 1 или 2 - проходил бы вариант с :only-child, но их может быть и 3 и 4...

Не проходит вариант с JS - явы быть не должно.

Не проходит column-count - расположение блоков должно быть построчным.

PS: На старые браузеры можно забить.

PPS: Ощущение, что решение где-то в селекторах типа nth-child(2):before - но как заставить подвинуть первый блок свойствами второго?

[Nanto]

не очень понятно...

http://jsfiddle.net/Rfngm/ - это разве не подойдёт? или Вам надо точнёхонько вписывать?

[Xerol]

Не пойдет сразу по нескольким причинам:

1. По факту получаются блоки фиксированной ширины (100px)

2. Блоки не занимают всю ширину, а только кратную 100px, хотя это не критично.

3. Если в блок поместить текст - этот текст разопрёт блок. Нужно чтобы все блоки были одинаковой ширины независимо от наполнения.

[Nanto]

1. По факту они схлопнулись до min-width. Положите в них контент и они растянутся.

2. Это вообще

3. Вы можете по человечески объяснить?

дайте им фиксированную ширину!

или что Вы хотите? Вычислять самый длинный блок с контентом, делить нацело ширину резинового для ближайшего значения, вычислять одинаковую ширину для всех блоков, задавать им при уменьшении основного блока сужение ширины, а при критическом значении минимальной ширины переносить вниз? и всё это без JS?

Тут и c JS возни-то!...

[Great Rash]

Не мучайтесь и юзайте таблицу для этих целей.

[Switch74]

скажите минимальную и макимальную ширину всего сайта и каждого блока

выоты у блоков одинаковые?

можно попробовать совместить @media с min-width и max-width

знать сколько блоков нужно в любом случае, чтобы им выставлять какую часть от общего контента им можно занимать

как формируются данные блоки, это статичная траница или php. Ели php формирует разметку, то количество блоков подсчитать не проблема, если страница статичная то элементарно можно вместе с добавлением/удалением блока менять один class или id

Edited April 13, 2012 by Switch74

[Nanto]

какой PHP? Автор от js нос воротит!

[Switch74]

js php html это разные вещи... и рядом c php я вроде бы опиал вариант и без него

[Xerol]

> Тут и c JS возни-то!

На JS всё давно реализовано, делов на 10 минут.

> дайте им фиксированную ширину! или что Вы хотите?

Я хочу резиновую ширину.

Поведение должно быть таким, как если бы я задал ширину 33% при трёх блоках, или 25% при четырёх, а внутрь блоков вставил другие блоки с width: auto; и min-width: 200px;

Проблема в том, что количество блоков не известно заранее.

> Не мучайтесь и юзайте таблицу для этих целей.

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