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

Question

设置

我有一个网站，可以绘制 RSS 提要并将其显示在页面上。 目前，我在包含每个 feed 的 div 上使用百分比，以便多个 feed 可以彼此相邻出现。

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

我希望

能够做的，但还没有找到一种方法，是将所有提要线性地放入页面中，并且具有：

• 一个“预构建”多列视图，其中提要将“平衡”它们本身进入列，

这使我发现：

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

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

问题

我想我需要实现某种形式的 AJAXy 快乐，但目前对 Javascript 知之甚少。

有没有办法用 仅 CSS/HTML/PHP 来做到这一点？

如果不是，我应该如何解决这个问题？

最终解决方案：（

基于@warpr's和@joh6nn 的回答）

#rss
        {min-width: 10em;
        max-width: 25em;
        min-height: 15em;
        max-height: 25em;
        font-size: .97em;
        float: left;
        }

Answer 1

仅使用 CSS/HTML 可能无法获得您想要的结果，但您可以在某种程度上接近。

我在相册中使用的一个技巧是：

1. 确保每个 feed 都有固定的宽度，我会推荐类似“20em”的宽度；
2. 确保每个 Feed 的高度相同。
3. 剩下的一切都漂浮起来。

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

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

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

这相当容易实现，但显然不是最佳的。 我期待阅读这里发布的任何更好的解决方案:)

Answer 2

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

如果您使列表项显示：内联，则列表将变为水平而不是垂直。 从那里开始，如果您将列表填充到包含元素中并摆弄填充和边距，您可能能够使列表进行线扭曲，如文本：再次，我从未尝试过，所以我不这样做知道。

如果这项技术有效，我将非常有兴趣了解它。

Answer 3

我能想到的唯一方法是动态 CSS 和 javascript 的混合。 每次添加列（提要）时，请使用 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;
}