Исходная задача заключалась в реализации вертикальной многоколоночной вёрстке больших списков с изменяемым числом столбцов, зависящим от горизонтального разрешения. Без использования javascript и без использования возможностей css3. Т.е. эта вёрстка должна работать и на старых браузерах с отключенными скриптами.
Именно в такой постановке задача нерешаема. Необходимы какие-то "послабления".
Поэтому, остановился на самом оптимальном варианте:
1 .
На уровне html с использованием css2 оформляю минимальное число столбцов, которое должно быть при минимальном горизонтальном разрешении (минимальной ширине контейнера):
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<div id="wrapper">
<div class="column">
<div class="item">...<span>item1<span>...</div>
<div class="item">...<span>item2<span>...</div>
<div class="item">...<span>item3<span>...</div>
</div>
<div class="column">
<div class="item">...<span>item4<span>...</div>
<div class="item">...<span>item5<span>...</div>
<div class="item">...<span>item6<span>...</div>
</div>
...
</div>
На стороне сервера, зная общее число элементов, распределить их по столбцам не составляет проблем.
Если горизонтальное разрешение будет больше минимального, то эти столбцы просто-напросто будут расширяться, не порождая никаких артефактов в вёрстке.
Далее, если браузер поддерживает css3,
на уровне css выполняются следующие действия:
2 . Все блоки-столбцы <div class="column"> переводятся в такое состояние, при котором содержащиеся внутри них элементы ведут себя так, как будто блоков класса column нет, а их родителем является блок wrapper.
3 . Используя возможности css3 (например,
CSS Multi-column Layout Module ), оформить элементы класса item в виде колонок.
================================================================================================
Сабжевый вопрос заключается в том, каким образом, используя возможности css3, реализовать пункт №2 ?
Можно все элементы внутри столбцов сделать плавающими, а столбцам задать свойство [overflow: visible] - в этом случае блок-столбец "схлопнется" по вертикали, а элементы будут вести себя так, как будто блока-столбца и нет. Этот вариант не реализуем, поскольку:
а) сами элементы списка либо содержимое этих элементов не должны быть плавающими (исходное условие)
б)
css3-column-свойства с плавающими элементами будут работать некорректно (вернее, не так, как нужно)
Другой вариант - использовать псевдоэлементы :after и :before для закрытия тега <div class="column"> (сразу после оного) и открытия тега </div> (сразу перед оным). Т.е. из одного столбца с элементами получим два пустых столбца. Этот вариант тоже не реализуем, т.к. псевдоэлементы :after и :before работают только с текстом (теги в свойстве content будут восприниматься как строки).
Может ли css3 справиться с этой задачей ?
Скрипты использовать нельзя.
