Выравнивание высоты материалов по сетке.

firsovmm

Новичок
2
0 / 0

Выравнивание высоты материалов по сетке.

« : 14.04.2012, 00:40:42 »

Всем привет.
Поиском попользовался - решения не нашлось... (может руки конечно кривоваты

)

Имею Joomla 1.5.26 и K2 v2.3 сайт
Моя проблема в том, что материалы выводимые K2 (в категории) в два столбца выравниваются только по столбцам (по ширине), а мне нужно ещё и по строкам (по высоте).
Т.е.

из-за того, что картинки материала по разному ориентированы (или разный размер) высота блоков различна, а хотелось бы чтобы была одинакова.
Как реализовать?

Проблемная страница(ссылка)

Записан

firsovmm

Новичок
2
0 / 0

Re: Выравнивание высоты материалов по сетке.

« Ответ #1 : 17.04.2012, 11:28:10 »

Up

неужели никто не сталкивался? (или я опять тему не туда запостил?

)

Записан

lottis

Захожу иногда
181
11 / 0

Re: Выравнивание высоты материалов по сетке.

« Ответ #2 : 18.04.2012, 23:18:33 »

не совсем понял что вам нужно.

У вас есть два квадрата - в одном фотка в другом её нет. Фотка конечно-же растягивает блок. Вам нужно чтобы блок в котором нет фотки был такой-же по высоте как и тот что с фоткой?

Если да - то нужно просто блокам присвоить определенную высоту., т.е. в стилях templates.css строка 666 блоку div.catItemView добавить высоту height: 325px;

общий вид должен быть таким :

Код

div.catItemView {
    border: 2px solid #339999;
    border-radius: 5px 5px 5px 5px;
    bottom: inherit;
    height: 325px;
    margin-left: 2px;
    margin-top: 10px;
}

« Последнее редактирование: 18.04.2012, 23:22:45 от lottis »

Записан

Shustry

Moderator
6434
745 / 3

Re: Выравнивание высоты материалов по сетке.

« Ответ #3 : 18.04.2012, 23:41:05 »

Это в вопросы про CSS надо было. На самом деле нетривиальная задача для вёрстки. Объясню в двух словах, как решаецо.
Задача минимум (что вы спросили собсно): Сделать одинаковую высоту этих блоков.

Код: css

.blok {display: inline-block;}

Всё. Каждый блок в строке примет максимальную возможную высоту - ту, которая у самого высокого.
Усложним задачу. У вас там "добавить коммент" и "подробнее" есть. Логично их прижать к низу блока. Тогда:
Разметка:

Код: html4strict


<div id="bloks">

<div class="blok">
<div class="blok_t">
<div class="blok_t">Контент блока</div>
<div class="blok_b">Типа подвал, где ссылки "подробнее" и "комментарии"</div>
</div>

<div class="blok">
<div class="blok_t">
<div class="blok_t">Контент блока</div>
<div class="blok_b">Типа подвал, где ссылки "подробнее" и "комментарии"</div>
</div>

<div class="blok">
<div class="blok_t">
<div class="blok_t">Контент блока</div>
<div class="blok_b">Типа подвал, где ссылки "подробнее" и "комментарии"</div>
</div>

</div>

Стили:

Код: css

.blok,
.blok_t, 
.blok_b {display: inline-block;}
.blok_t {height: 100px; vertical-align: top;}
.blok_b {height: 30px; vertical-align: bottom;}

#bloks {display: inline;}

И не придётся никаких position:absolute, display:table, js и т.д. городить.

Записан

Все Первые Буквы Слов - Заглавные (в названии материалов) Автор rrrl	Ответов: 6 Просмотров: 5146	20.10.2014, 18:19:22 от darkghost
Шаблон блога материалов на главной Автор Yuriy Kuznetsov	Ответов: 8 Просмотров: 2401	29.05.2014, 06:02:41 от Yuriy Kuznetsov
Установить в шаблон поле для вывода материалов Joomla Автор Kosty	Ответов: 3 Просмотров: 1864	03.09.2013, 10:43:22 от Kosty
Добавляем rel="canonical" в шаблоны материалов Joomla 1.5 Автор AmdAveO	Ответов: 61 Просмотров: 49027	14.12.2012, 10:08:55 от AmdAveO
Мучилась с шаблоном отправки материалов оказалось Автор Eva36	Ответов: 9 Просмотров: 2615	10.12.2012, 20:15:30 от D M

Выравнивание высоты материалов по сетке. - Joomla 1.5: Шаблоны, разметка и макеты вывода

Новости Joomla

👩‍💻 События плагинов и порядок их срабатывания при работе с пользовательскими полями Joomla и использовании FieldsHelper.

🏆 Открыто голосование за Joomla в премии CMS Critic People’s Choice Awards 2025

👩‍💻 Релиз JoomGallery 4.3.0 - компонент галереи изображений для Joomla.

firsovmm

Выравнивание высоты материалов по сетке.

firsovmm

Re: Выравнивание высоты материалов по сетке.

lottis

Re: Выравнивание высоты материалов по сетке.

Shustry

Re: Выравнивание высоты материалов по сетке.

Похожие темы