Динамическое изменение размера / изменение положения div для просмотра нескольких столбцов

Question

Настройка

У меня есть веб-сайт, который рисует RSS-каналы и отображает их на странице. В настоящее время я использую проценты для элементов div, которые содержат каждый канал, так что кратные значения могут отображаться рядом друг с другом.

Однако у меня есть только два рядом друг с другом, и если размер окна изменяется, на экране может появиться какое-то ужасное пустое место.

Желание

То, что я хотел бы сделать, но пока не нашел пути, это поместить все каналы линейно на страницу и иметь:

• «предварительно построенное» многоколоночное представление, в котором каналы «балансируют» себя в столбцах

что приводит меня к:

• количество столбцов изменяется в зависимости от ширины экрана в настоящее время \

Это похоже на то, как приложения для обработки текста обрабатывают столбчатые макеты.

Вопрос * * 1023 Я предполагаю, что мне нужно будет реализовать некоторую форму счастья AJAXy, но в настоящее время очень мало знаю о Javascript. Есть ли способ сделать это с просто CSS / HTML / PHP? Если нет, то как мне решить эту проблему?
окончательное решение: (на основе ответов @ warpr и @ joh6nn ) #rss {min-width: 10em; max-width: 25em; min-height: 15em; max-height: 25em; font-size: .97em; float: left; }

Answer 1

Вы, вероятно, не можете получить то, что хотите, только с помощью CSS / HTML, но вы можете подойти немного ближе.

Я использовал трюк для фотоальбома:

1. Убедитесь, что каждый канал имеет фиксированную ширину, я бы порекомендовал что-то вроде '20em';
2. Убедитесь, что каждый корм имеет одинаковую высоту.
3. Плавай все, что осталось.

Поскольку каждый div имеет одинаковые размеры, при перемещении влево он сформирует сетку с точно таким количеством столбцов, которое поместится в вашем браузере.

Если вы на самом деле не фиксируете высоту divов и не используете CSS для обрезки содержимого, вам понадобится JavaScript для шага 2, что я и сделал:

1. Итерируйте по каждому элементу подачи, находя самый высокий элемент.
2. Повторяйте итерации по каждому div, изменяя высоту в соответствии с div, найденным на первом шаге.

Это довольно легко реализовать, но, очевидно, не оптимально. Я с нетерпением жду, чтобы прочитать любые лучшие решения, размещенные здесь:)

Answer 2

вы можете сделать это с помощью списков; я никогда не пробовал, поэтому я не уверен.

если вы отображаете элементы списка: встроенные, список становится горизонтальным, а не вертикальным. оттуда, если вы поместите список в содержащий элемент и возьмете его с отступами и полями, вы сможете получить список для деформации строки, как текст: опять же, я никогда не пробовал этого, поэтому знаю.

если эта техника сработает, мне было бы очень интересно узнать об этом.

Answer 3

Вы также можете использовать этот jQasery javascript (вам понадобится библиотека jQuery).

var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
     $(this).width(colWidth);
});

Что бы динамически устанавливать ширину столбца.

Чтобы это работало, ваши столбцы должны иметь класс 'feed'

EDIT:

Вы должны стилизовать ваши divs примерно так:

.feed{
  float:left;
}

Answer 4

Единственное, о чем я могу думать, это смесь динамического CSS и javascript. Каждый раз, когда добавляется столбец (канал), используйте JavaScript, чтобы переписать ширину (в процентах) каждого div.

jQuery здесь пригодится.

var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");

Кто-то может поправить меня, если я ошибаюсь. Мой jQuery немного шаткий.

Конечно, если вы не используете AJAX, вы можете полностью реализовать это решение в PHP.