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

Вывод новостей в 2 колонки как в газете


     23.02.2012    Общие вопросы по вёрстке, Ламерские вопросы    3084

вопрос
Здравствуйте, более опытные коллеги!
Есть сайт под управлением DLE.
Есть желание заказчика видеть новости в 2 колонки.
Рецептов в инете множество.

Есть желание заказчика видеть 2 непрерывные колонки новостей, т.е. чтобы в каждой из них новости следовали прямо друг за другом, не разделяясь на несколько параллельных горизонтальных пар (да, нелепо, но именно так надо :) ).
Рецепта в интернете найти не могу.

Подскажите, пожалуйста, как можно это реализовать (если вообще можно)?

Ответил: ПафНутиЙ


Хороший вопрос! Что-то новое наконец на сайте))
В принципе это можно сделать двумя способами
  1. На css3 - но это пока не вариант.
  2. С помощью jquery
    Теория:
    Считаем количество новостей, делим на два, вставляем после новости, попавшей в результат деления закрывающий и открывающий теги блока, оборачивающего все новости.
    На практике это выглядит вот так:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Новости в две колонки как в газете</title>              
        <meta content="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
        <script>
        jQuery(function($) {
            length = $(".news_wrap").find(".news").length; //Считаем общее количество новостей на странице        
            $(".news_wrap").after('<div class="news_wrap col-2"></div>'); //Вставляем после дива с новостями ещё один такой же
            $(".news:nth-child("+(length - (length % 2)) / 2+") ~ .news").appendTo(".col-2"); //Вот тут самое интересное и происходит
        });
        </script>      
        <style type="text/css">
            .news_wrap {
                width: 300px;
                margin: 0 20px 0 0;
                background: #c0c0c0;  
                float: left;
                }
        </style>
    </head>

    <body>
        <h1>Новости в две колонки как в газете</h1>  
        <div class="news_wrap">
            <div class="news">Новость 1</div>
            <div class="news">Новость 2</div>
            <div class="news">Новость 3</div>
            <div class="news">Новость 4</div>
            <div class="news">Новость 5</div>
            <div class="news">Новость 6</div>
            <div class="news">Новость 7</div>
            <div class="news">Новость 8</div>
            <div class="news">Новость 9</div>
            <div class="news">Новость 10</div>
        </div>         
    </body>
    </html>

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

slo
11 | 11

slo - 16 июня 2012 00:58 - Юзер

ПафНутиЙ, огромное спасибо Вам! А можете подсказать как вывести новости в 3 колонки?

slo
11 | 11

slo - 16 июня 2012 02:23 - Юзер

решение нашла сама feel

Sander
1126

1637 | 1204

Sander - 17 июня 2012 02:44 - Эксперт

Паш, а не проще ли вместо
(length - (length % 2)) / 2

просто
Math.ceil( length/2 )


PS. А вопрос действительно интересный.

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

ICQ: 404-037-556
Skype: Sander8804

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 17 июня 2012 03:20 - Админ

А есть разница?
Я что-то не улавливаю.

Каков вопрос - таков и ответ. Просто помните об этом.

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

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