Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Шаблоны (TPL) Как сделать вывод новостей так как на картинке

Как сделать вывод новостей так как на картинке


     22.12.2013    Шаблоны (TPL), Стили (CSS)    1353

вопрос
На одном из сайтов позаимствовал дизайн новостных блоков для своего шаблона shortstory.tpl одной из категорий. Но уменя они отображаются не так как там. У меня они тупо формируются в один столбец, хотя справа есть свабодное место которое можно заполнить. Вот посмотрите я схематично нарисовал как у меня получается сейчас и как хочется что бы было.

1. Левая колонка на рисунке. Это новости у меня так формируются сейчас на странице.
2. Правая колонка. Хочется получить формирование новости такое

Как сделать вывод новостей так как на картинке

Ответа пока нет


Комментарии пользователей (7)

psarovskiy
37 | 13

psarovskiy - 22 декабря 2013 12:48 - Юзер

добавьте float:left, если блоки одинаковой высоты то будет норм, если у всех разная или динамическая высота, то только с использованием js) например masonry

bembelby
80 | 6

bembelby - 22 декабря 2013 19:34 - Юзер

psarovskiy, уже вроде как прописано
.sort li {
    display:block;
    float:left;
    height:168px;
    margin: 0 6px 0 0;
    padding: 4px;
    position:relative;
    width:211px;
    line-height:14px;
    list-style: none outside none;
}

bembelby
80 | 6

bembelby - 26 декабря 2013 23:32 - Юзер

актуально...оч нужно решение

Sander
1125

1637 | 1204

Sander - 27 декабря 2013 04:40 - Эксперт

Первую строку файла shortstory.tpl в студию!

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

bembelby
80 | 6

bembelby - 27 декабря 2013 19:25 - Юзер

Sander,
<ul id="short_view" class="sort">

Sander
1125

1637 | 1204

Sander - 28 декабря 2013 22:24 - Эксперт

В корне неверное использование тега ul
Так же тут не валидно использовать аттрибут id

Типа так:
<ul class="sort" style="float:left;width:33%;">

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

bembelby
80 | 6

bembelby - 29 декабря 2013 00:12 - Юзер

Не работает ((

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы