Question

设置

我有一个网站，可以绘制RSS源并在页面上显示它们。目前，我在包含每个Feed的div上使用百分比，因此倍数可以显示在彼此旁边。

但是，我只有两个彼此相邻，如果窗口调整大小，屏幕上可能会有一些丑陋的空白区域。

欲望

我希望能够做到的，但尚未想出办法，就是将所有Feed线性地放入页面中，然后：

一个'预建'多列视图，其中Feed会将自己“平衡”到列

引导我：

列数根据屏幕当前的宽度而变化

这类似于文字处理应用程序处理柱状布局的方式。

问题

我认为我需要实现某种形式的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得到你想要的东西，但你可以稍微接近。

我用于相册的一个技巧是：

确保每个Feed有一个固定的宽度，我建议像'20em';
确保每个Feed的高度相同。
将所有东西都留下来。

因为每个div具有相同的尺寸，当它们向左浮动时，它们将形成一个网格，其中包含适合您浏览器的列数。

除非您实际修复div的高度并使用CSS剪辑内容，否则您需要步骤2的javascript，我所做的是：

迭代每个Feed div，找到最高的div。
再次迭代每个div，更改高度以匹配第一步中找到的div。

这很容易实现，但显然不是最佳的。我期待阅读这里发布的更好的解决方案：）

Answer 2

你可以用列表做到这一点;我从未尝试过，所以我不确定。

如果您显示列表项：内联，则列表将变为水平而不是垂直。从那里，如果你把列表填充到一个包含元素并填充填充和边距，你可能能够将列表变为线性扭曲，就像文本：再次，我从来没有尝试过，所以我不知道。

如果这项技术有效，我会非常有兴趣听到它。

Answer 3

我能想到的唯一方法是动态CSS和javascript的混合。每次添加列（feed）时，使用javascript重写每个div的宽度（以百分比表示）。

jQuery会在这里派上用场。

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

如果我错了，有人可以随意纠正我。我的jQuery有点不稳定。

当然，如果你不使用AJAX，你可以完全用PHP实现相同的解决方案。

Answer 4

你也可以使用这个jQuery javascript（你需要jQuery库）。

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

将动态设置列宽。

为此，您的列应具有“Feed”类

编辑：

你应该为你的div设置这样的样式：

.feed{
  float:left;
}

动态调整大小/重新定位div以进行多列查看

设置

欲望

问题

最终解决方案：

4 个答案: