Выравнивание блоков по высоте - Joomla 1.5: Настройка и оптимизация

Всем привет))

В общем-то, на форуме обсуждалось, как задать нескольким блокам одинаковую высоту
Может не внимательно смотрел, но ничего для себя не нашел. Гуглил...

Вариант с отрицательными margin, padding в данном случае не подходит по некоторым причинам.

Пользуюсь таким скриптом:


но он не всегда корректно вычисляет высоту в chrom и safari (и после обновления страницы иногда пересчитывает неправильно)

Может кто-нибудь знает готовые проверенные решения?

Спасибо.

Блин, по ошибке зарядил тему в j1.5!
хотя, в общем-то какая разница

Да нету вроде ничего универсального. В каждом конкретном случае смотреть нужно.
Бордер можно ещё сделать. Тут шустрый описывал

тут немножко не так

2 ряда, по 3 блока в каждом, бордер-радиусы и абсолютно позиционированный span, прижатый к нижней границе ...

без js тут не обойтись

Вы бы макет нарисовали с границами и блоками, так ничего не понять...

Где-то так ..
Извиняюсь за качество, на скору руку
рамку с тенями рисовать не стал

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

[вложение удалено Администратором]

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


Идея такая...
Задаем внешнему диву бэкграунд, на котором нарисовано три колонки с бэкграундом до самого низа. Нижнего и верхнего закругления нет. Внизу и вверху делаем еще по одному диву, в верхнем  картинка с верхними закруглениями, в нижнем - с нижними. Нижний поднимаем отрицательным маргином.

То же самое для второго блока "с кубиками"

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

тут немножко не так

2 ряда, по 3 блока в каждом, бордер-радиусы и абсолютно позиционированный span, прижатый к нижней границе ...

без js тут не обойтись

А если жестко высоту задать?

А если жестко высоту задать?

Я думаю, с жестко заданной высотой тут и вопроса бы не возникло. Вопрос только в переменном по высоте контенте.

Можно добавить 3 блока {position:absolute;z-index:-1;top:0; bottom:0; left:x;}
Ну и общий обязательно position:relative. И резинку можно...

Можно добавить 3 блока {position:absolute;z-index:-1;top:0; bottom:0; left:x;}
Ну и общий обязательно position:relative. И резинку можно...

Ну да... но там уже столько дивов, что на пальцах не опишешь... код нужен - а лень)))

Хотя, стой. В одном блоке - один абсолют. Больше не даст. Проблемы будут скорее всего.

dimon888951,
задавал жестко, но пришлось ставить ограничение на кол-во выводимых знаков, а это не всегда удобно, особенно если с изображениями

Taatshi,
Спасибо. Все понятно. Не проверяя вижу, что будет работать
вот только ... рисовать много. У меня в разных разделах, разное количество колонок и даже разное кол-во блоков в ряду ...
А подтягивая нижний рисунок отрицательным маргином - накрою абсолютный span (хотя, в принципе, его можно и подвинуть)

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

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

Со скриптом вот так хром режет, причем через раз! .. гад

[вложение удалено Администратором]

Хотя, стой. В одном блоке - один абсолют. Больше не даст. Проблемы будут скорее всего.

Даст. Только внешнему ещё нужен ещё z-index:1; и overflow:hidden;
ну и left:x - для каждого блока разный (0, 33%, 66%ж)

Вот тут я давал решение для этой задачи:
http://joomlaforum.ru/index.php/topic,212768.msg1117099.html#msg1117099
Ключевое правило: display: inline-block
Вот тут подробно расписан приём: http://chikuyonok.ru/2011/04/inline-vertical-align/
Вот тут можно посмотреть на моём примере: http://prokat777777.ru/

Тут и думать нечего - только js.
Вместо того чтобы мудрить со стилями, вставил 10 строк кода в файл и пьешь кофе. Я каждый раз заново пишу такой, но если есть сайт, могу вечером написать универсальное решение вам и себе на будующее. С выравниванием блоков по высоте в каждом ряду отдельно и пересчетом при ресайзе окна.

lcd25, я тоже могу это написать на JS. Тут и писать нечего. Зачем, если это одной строкой (display: inline-block) решается?

щас, буду читать ..

никуда не уходите!

lcd25, я тоже могу это написать на JS. Тут и писать нечего. Зачем, если это одной строкой (display: inline-block) решается?

А почему они примут максимальную высоту?

lcd25, я тоже могу это написать на JS. Тут и писать нечего. Зачем, если это одной строкой (display: inline-block) решается?

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

А почему они примут максимальную высоту?

Я вот тоже не пойму...

Shustry, спасибо, интересное решение ))

Только оно не выравнивает блоки по высоте, а просто заменяет float и необходимость использовать row-separator
Если, как в примере, использовать пару контент-подвал (header-footer в др. примере), то все равно придется "скотчем" приматывать фоновый рисунок между ними, а если учесть, что он может меняться как по размеру, так и по цвету + рамки/тени (понты, конечно...), то гемор еще тот

Похоже, без js не получится

В общем так:
Родительский div
- в нем строка из нескольких контейнеров-оберток
-- в каждой обертке по рабочему div'у

нужно чтобы эти рабочие блоки были одной высоты - по высоте максимального

row-separator,
следующий ряд тоже самое (имена классов, естественно, такие-же)

На выходе:
универсальный скрипт, который можно вызвать в нужном месте (в пхп-файлах com_content, или модулей)
желательно (но не обязательно), без подгрузки лишних библиотек

Устроит платное решение (в пределах разумного)

Родительский div
- в нем строка из нескольких контейнеров-оберток
-- в каждой обертке по рабочему div'у

Не совсем понял. На каждый блок есть 2 блока, которые должны быть максимальной высоты?

div.work - должны быть одинаковой высоты в контейнере parent-block-1, и parent-block-2

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

где-то так..

Не нужно скрипт.
.wrap-col {display:table-cell; width:33%;position:relative;}
.work {position:absolute; top:0;bottom:0;margin:0 10px; background:#ccc;border-radius:10px;}

Вот один из примеров использования скрипта, который я привел в начале,
в немного подпиленном blog.php

щас посмотрю,
пока писал уже ответ пришел))

Не нужно скрипт.
.wrap-col {display:table-cell; width:33%;position:relative;}
.work {position:absolute; top:0;bottom:0;margin:0 10px; background:#ccc;border-radius:10px;}

в таком виде - не работает ..
Но уже близко! разбираюсь ..

Да. Неправильно. Вот так работает.

.parent-block-1, .parent-block-2 {display:table; border-spacing: 5px;}
.wrap-col{display:table-cell;position:relative;width:30%; border-radius:10px;background:#ccc;}

.work - ничего не надо. position:absolute убрать

P.S. Для .wrap-col border был ненужен. исправил

YES!
работает!

Efanych, спасибо огромное

это ж сколько теперь всего переделывать ..
напилил)))

Efanych, дивная табличная верстка    красивое решение  

А я таблицами никогда не верстал, теперь отсутствие опыта сказывается ))