Php 用于多列查看的div动态调整大小/重新定位 安装程序

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

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

愿望 我想做的是，将所有提要线性地放到页面中，并且：

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

这让我想到：

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

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

问题 我假设我需要实现某种形式的AJAXy快乐，但目前对Javascript知之甚少

有没有一种方法可以通过仅仅CSS/HTML/PHP来实现这一点

如果没有，我应该如何着手解决这个问题

最终解决方案： （基于和的答案）

---

您可能无法仅使用CSS/HTML获得所需内容，但您可以在某种程度上接近它

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

确保每个提要都有一个固定的宽度，我会推荐类似“20em”的东西

确保每个进纸的高度相同

把剩下的都浮起来

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

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

迭代每个提要div，找到最高的div

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

---

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

您可能无法仅使用CSS/HTML获得您想要的，但您可以稍微接近

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

确保每个提要都有一个固定的宽度，我会推荐类似“20em”的东西

确保每个进纸的高度相同

把剩下的都浮起来

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

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

迭代每个提要div，找到最高的div

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

---

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

您可以通过列表来实现这一点；我从来没有试过，所以我不确定

如果使列表项显示为：inline，则列表将变为水平而不是垂直。从这里开始，如果你将列表填充到一个包含元素中，并对填充和边距进行修改，你可能会使列表像文本一样进行线扭曲：再说一遍，我从来没有尝试过，所以我不知道

---

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

您可以通过列表来实现这一点；我从来没有试过，所以我不确定

如果使列表项显示为：inline，则列表将变为水平而不是垂直。从这里开始，如果你将列表填充到一个包含元素中，并对填充和边距进行修改，你可能会使列表像文本一样进行线扭曲：再说一遍，我从来没有尝试过，所以我不知道

---

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

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

jQuery将在这里派上用场

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

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

---

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

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

jQuery将在这里派上用场

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

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

---

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

您也可以使用这个jQuery javascript（您将需要jQuery库）

这将动态设置列宽

要使其正常工作，您的列应该具有类“feed”

编辑：

你应该这样设计你的div：

.feed{
  float:left;
}

---

您还可以使用这个jQuery javascript（您将需要jQuery库）

这将动态设置列宽

要使其正常工作，您的列应该具有类“feed”

编辑：

你应该这样设计你的div：

.feed{
  float:left;
}

---

用ems固定高度和宽度确实有效。。。谢谢我将尝试John6nn的解决方案，用ems固定高度和宽度是可行的。。。谢谢我将尝试John6nn的解决方案，tooCheck out:Check out: