|
|
|
| Есть такая задача. В аттаче есть ужасный (по всем параметрам) список =)
Мне нужно сверстать его так, чтобы
1) 3 колонки были одинаковой ширины (знаю как сделать)
2) 3 колонки были одинаковой высоты (не знаю как сделать)
В принципе не особо важно чем верстать, главное чтобы выполнялись указанные выше условия.
У меня проблему вызывает то, что под каждой буквой ведь может быть неизвестной количество пунктов (как и количество букв). Поэтому будет возникать разность в высоте. | |
|
|
|
|
|
|
|
для: ddhvvn
(07.08.2009 в 16:29)
| | А аттач-то где? | |
|
|
|
|
|
|
|
для: ddhvvn
(07.08.2009 в 16:29)
| | если без скриптов, то только если в такой последовательности можно сделать стилями
1. 2. 3.
4. 5. 6.
7. 8. 9.
если так:
1. 4. 7.
2. 5. 8.
3. 6. 9.
то только скриптом | |
|
|
|
|
74.4 Кб |
|
|
для: AlexSol
(07.08.2009 в 16:53)
| | Да нужен второй вариант. А каким скриптом то? JS или PHP? а то мало ли... )
p.S: Аттач в аттаче ) | |
|
|
|
|
|
|
|
для: ddhvvn
(10.08.2009 в 15:43)
| | http://www.csscripting.com/css-multi-column/
на js | |
|
|
|
|
|
|
|
для: AlexSol
(10.08.2009 в 16:13)
| | либо я что-то не допонял в реализации, то ли это тоже просто таблицу делит на 3 колонки (т.е. получается 1 вариант) | |
|
|
|
|
|
|
|
для: ddhvvn
(12.08.2009 в 12:56)
| | как я понял, этот скрипт разбивает строки на указанное количество столбцов (и вроде по вертикали), но мне нужно несколько другое.
мне нужно чтобы учитывалось, что под каждой буквой может быть разное количество пунктов. И чтобы в результате была таблица с 3 колонками, выравненная по нижнему краю 2 или всех 3 колонок (собственно как на картинке или чтобы буквы были на одном уровне) | |
|
|
|
|
|
|
|
для: ddhvvn
(12.08.2009 в 13:25)
| | Логика необходимого вам скрипта такова:
а) определяем высоту каждого блока (блок - это буква и соответствующие ей пункты);
б) суммируем полученные высоты всех блоков и результат делим на 3, т.о. получаем среднюю высоту столбца;
в) последовательно складываем высоты блоков до "подхода" к средней высоте ("плюс-минус"), т.о. получаем содержимое всех трёх столбцов (какие конкретно блоки будут в первом, во втором и в третьем столбцах) * Здесь возможна оптимизация путём наилучшего выбора из четырех возможных вариантов;
г) определяем максимальный по высоте из получившихся трёх столбцов, а остальные два "подтягиваем" до этого значения.
Как видите - всё просто.
Единственное, что отсутствует, так это ваше указание на способ "подгонки" двух столбцов по высоте в пункте г).
Способ может быть одним из трёх:
- или можно увеличивать расстояние только между блоками (А);
- или можно увеличивать расстояния только внутри блоков - между пунктами и между первым пунктом и буквой (Б);
- или можно увеличивать и то, и другое одновременно (А + Б). | |
|
|
|
|
|
|
|
для: PAT
(12.08.2009 в 14:55)
| | Ок, спасибо.
В голове была каша, но по Вашей инструкции все сделал по шагам и норм! | |
|
|
|