2

设置

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

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

欲望

我想要做的，但还没有想出办法，就是将所有提要线性放入页面中，并具有：

  • 一个“预建”的多列视图，其中提要将自己“平衡”到列中

这导致我：

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

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

问题

我认为我需要实现某种形式的 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;
        }
4

4 回答 4

3

您可能无法仅使用 CSS/HTML 获得您想要的，但您可以得到一些接近。

我用于相册的技巧是这样的：

  1. 确保每个提要都有固定的宽度，我会推荐像“20em”这样的东西；
  2. 确保每个饲料具有相同的高度。
  3. 把剩下的东西都浮起来。

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

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

  1. 遍历每个提要 div，找到最高的 div。
  2. 再次遍历每个 div，更改高度以匹配第一步中找到的 div。

这很容易实现，但显然不是最优的。我期待阅读此处发布的任何更好的解决方案:)

于 2008-11-07T14:16:08.810 回答
1

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

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

如果这种技术有效，我很想听听。

于 2008-11-07T14:30:50.823 回答
0

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

jQuery 在这里会派上用场。

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

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

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

于 2008-11-07T15:05:44.140 回答
0

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

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

这将动态设置列宽。

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

编辑：

你应该为你的 div 设置如下样式：

.feed{
  float:left;
}
于 2008-11-08T10:16:08.967 回答