Интересное

Проверено

VDS-хостинг - именно на этом хостинге работает наш сайт.
Sape - биржа временных ссылок, доход 80р/день.
Trustlink - биржа временных ссылок, доход 60р/день.

Партнеры

Последние сообщения с форума

Название темы Автор Статистика Последнее сообщение
продажа аккаунтов разных сервисов

Тема в разделе: Услуги и сервисы ваших web-сайтов

Sdelkin

Просмотров: 179346

Ответов: 26

Автор: Sdelkin

3-02-2018, 18:55

хостинг от M-HOSTER

Тема в разделе: Хостинг

wmmax

Просмотров: 57627

Ответов: 0

Автор: wmmax

1-02-2018, 15:42

Комплексное продвижение (прогон) сайтов ру и en

Тема в разделе: Поисковая оптимизация

Kysovue

Просмотров: 142079

Ответов: 73

Автор: Kysovue

25-01-2018, 21:16

Special offer! SSD NVMe хостинг, Выделенный сервер и VPS SSD

Тема в разделе: Хостинг

iphoster

Просмотров: 61107

Ответов: 0

Автор: iphoster

10-11-2017, 22:56

продвижение сайтов, прогоны

Тема в разделе: Поисковая оптимизация

brig2

Просмотров: 77564

Ответов: 7

Автор: brig2

5-11-2017, 14:00

Новости в две, три, четыре и т.д. колонки (развитие мысли)




Итак суть по прежнему не меняется, будем использовать jQuery, но на этот раз код сократится до 1 строчки, что положительно влияет на скорость загрузки страницы (пусть и совсем незначительно).

Реализация

1. Код в shortstory.tpl должени иметь примерно такой вид:

<div class="news">
содержание shortstory и всякие теги,
главное тут - "обёртка" всего содержимого shortstory.tpl
</div>


2. Обязательные стили в CSS:

.news.float {
    float: left;
    width: 30%; //значение зависит от желаемого количества колонок (например для 5ти колонок нужно указать 18-20%)
    }
.clr {
    clear: both;
    height: 0;
    overflow: hidden;
    }


3. Ну и самое главное - jQuery-код:

<script type="text/javascript">
jQuery(function($) {
    $(".news").addClass("float").filter(":nth-child(3n)").after('<div class="clr"></div>');
});
</script>


Как видно из строки кода - всё совершенно просто - сначала дописываем всем блокам с классом news дополнительный класс, а потом дописываем после каждого третьего блока пустой div с слассом clr - это для того, чтобы новости имели ровное горизонтальное положение, а не плавали так, как им захочется.

Как настроить?

Легко!
Всё что нужно - это заменить цифру три в строке :nth-child(3n) на желаемую, и в CSS заменить width: 30%; на нужное значение (как правило методом подбора).

Другие новости по теме: