Вывод дочерних элементов. Тип 3. CSS

Вывод дочерних элементов. Тип 3. CSS

Чанк для MODX

Использовать для вывода можно заготовку для pdoResources.

22.04.2017[[+createdon:strtotime:date=`%d.%m.%Y`]]
[[+pagetitle]]
[[+tv.anketa_introtext]]
Подробнее

Высота элементов фиксированная, и фиксированная высота строки. У заголовка - 32px, у строки 16px, также у заголовка отступ снизу 16px. И у блока с текстом стоит высота 112px (16*7) и overflow:hidden. В совокупности это позволяет не переживать о том, что часть описания будет мерзенько не влезать. Да, избытык будет обрезан, но визуально это будет выглядеть совершенно корректно.

Рарзметка HTML:

25.05.2017
Заголовок
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Подробнее
25.05.2017
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Donec odio. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Donec odio.
Подробнее
25.05.2017
Заголовок
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Подробнее

Стили CSS:

.grid_item_style_2{
    padding: 0 25px 30px 35px;
    background-color: #fff;
	box-shadow: 0 2px 5px #ccc;
	margin-bottom: 30px;
}
.grid_item_style_2_bg{
    -webkit-background-size: cover;
    background-size: cover;
    height: 217px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    margin: 0 -25px 0 -35px;
}
.grid_item_style_2_date {
	background-color: #3b3b3b;
	color: #fff;
	padding: 6px 0;
	text-align: center;
	width: 111px;
	margin-bottom: 12px;
	font-weight: 500;
	margin-top: -16px;
}
.grid_item_style_2_info {
	overflow: hidden;
	height: 112px;
	margin-bottom: 16px;
}
.grid_item_style_2_title {
	font-size: 20px;
	margin-bottom: 16px;
	line-height: 32px;
}
.grid_item_style_2_intro {
	font-size: 13px;
	margin-bottom: 20px;
	line-height: 16px;
}
.grid_item_style_2_intro img{
    background-color: #eaeaea;
    padding: 8px;
}
.grid_item_style_2 .button_link_type1{
    padding: 8px 30px;
    border-radius:0;
    font-size: 13px;
}
.landing_block_2_more{
    text-align: center;
    margin-top: 20px;
}
.landing_block_2_more a{
    display: inline-block;
    text-decoration: none;
    color: #9ab4ca;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 18px;
    border-bottom: 2px solid;
}

.button_link_type1{
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
	font-size: 13px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    padding: 8px 30px;
	border-radius: 0;
    background-color: #ee5739;
    border:2px solid #ee5739;
    color: #fff;
}
.button_link_type1:hover {
    color: #fff;
    text-decoration: none;
	background-color: #d84325;
	border: 2px solid #d84325;
}

Результат:

25.05.2017
Заголовок
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Подробнее
25.05.2017
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Donec odio. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Donec odio.
Подробнее
25.05.2017
Заголовок
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Подробнее
Способ поблагодарить автора сайта:

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором