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

Без рубрики

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

Итак суть по прежнему не меняется, будем использовать 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%; на нужное значение (как правило методом подбора).