вопрос
Здравствуйте, более опытные коллеги!
Есть сайт под управлением DLE.
Есть желание заказчика видеть новости в 2 колонки.
Рецептов в инете множество.
Есть желание заказчика видеть 2 непрерывные колонки новостей, т.е. чтобы в каждой из них новости следовали прямо друг за другом, не разделяясь на несколько параллельных горизонтальных пар (да, нелепо, но именно так надо :) ).
Рецепта в интернете найти не могу.
Подскажите, пожалуйста, как можно это реализовать (если вообще можно)?
Есть сайт под управлением DLE.
Есть желание заказчика видеть новости в 2 колонки.
Рецептов в инете множество.
Есть желание заказчика видеть 2 непрерывные колонки новостей, т.е. чтобы в каждой из них новости следовали прямо друг за другом, не разделяясь на несколько параллельных горизонтальных пар (да, нелепо, но именно так надо :) ).
Рецепта в интернете найти не могу.
Подскажите, пожалуйста, как можно это реализовать (если вообще можно)?
Хороший вопрос! Что-то новое наконец на сайте))
В принципе это можно сделать двумя способами
В принципе это можно сделать двумя способами
- На css3 - но это пока не вариант.
- С помощью 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>
