Высота материалов в выводе блога категории

  • 2 Ответов
  • 363 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн footer

Всем привет! Вывожу материалы категрии (блог категории) в 2 колонки. Для блоков в колонках сделал следующие стили:

/*стиль блоков в колонках*/
.mat_b {
display: block;
height: 160px;

position: relative;
}
.readmore {
background-color: #eee;
bottom: 0;
display: block;
font-weight: bold;
height: 25px;
margin-bottom: -10px;
padding-left: 12px;
text-decoration: none;
width: 100%;
}
.mat_b .readmore {
position: absolute;
bottom: 0;
}
.readmore a{
color: #505050;
}
.readmore:hover{ text-decoration:underline}
.mat_b h2 a {
text-align: left;
}
.mat_b p {
text-indent: 1.5em;
}
.item img {
height: 100px;
width: 100px;
margin-right: 10px;
float: left;
}
Прописан класс страницы .blog_kolonka.
Через jQuery добавляю соответствующие классы (для вывода в 2 колонки используется бутстрап):
$(".blog_kolonka .items-row").wrap("<div class=\"col-md-6\"></div>");//добавляем сетку бутстрап чтобы
//выводить в 2 колонки
$(".blog_kolonka .items-row .item").wrap("<div class=\"mat_b\"></div>");
В итоге получаю ровненькие колонки, все отлично, адаптивно и т.д. Осталась не решенной одна проблема - высота блоков. Сейчас имеем - либо вертикальное наползание элементов друг на друга, либо все элементы ровно, но в некоторых материалах имеем закрытие части текста материала кнопкой "подробнее".
Вот собственно вопрос. Как сделать чтобы кнопка подробнее не налезала на текст материала? И не изобретаю ли я велосипед? Не накрутил ли я уже лишнего? Может быть есть уже готовые решения для поставленной мне задачи?
Заранее спасибо!

*

Оффлайн footer

Ответ найден. Проблема решена с использованием jquery. Может кому пригодится: http://jsfiddle.net/tjhjdvqs/2/

*

Оффлайн ShfVD

Решение не совсем корректное (имхо)  -  высоту желательно выравнивать в "строках" (два блока левый/ правый одинаковой высоты). Если найдёшь решение, не почти за труд - отпишись, или кто покажет.