JQuery Portlet - 是不是可以有不同的 Portlet 大小？

Posted 2023-02-23

【中文标题】JQuery Portlet - 是不是可以有不同的 Portlet 大小？

【英文标题】：JQuery Portlet - Is it possible to have varying portlet sizes?JQuery Portlet - 是否可以有不同的 Portlet 大小？

【发布时间】：2011-06-30 05:57:36

【问题描述】：

我正在使用portlet function of JQuery UI 创建一个基本门户页面。 JQuery UI 页面上的示例显示了一个非常简单的示例，其中包含 3 列和适合这些列的固定大小的 portlet。有没有办法解决这个问题，以便可以使用不同大小的 portlet。

具体来说，如果我有 3 列，我希望能够：

1) 拥有一个跨越所有 3 列 (3*1) 的 portlet 2) 在同一行上有一个 2*1 portlet 和一个 1*1 portlet，从而占用所有 3 列 3) 有任何变化。

如果有人能给我任何指点，我将不胜感激，

谢谢

日本

【参考方案1】：

http://jsfiddle.net/93F2T/

基于display as a grid。使用一个可排序的，并在空间不足时让您的 portlet 换行到下一行。

.portlet 
    display: inline-block;
    vertical-align: top;

【讨论】：

Alexey，我遇到了 sortables 示例，但解决方案存在以下问题：1）从技术上讲，它们不是 portlet，并且似乎缺少 portlet 的许多功能（标题栏、关闭图标，折叠等）2）在您提供的示例中，事情几乎是硬编码的。如果我想添加第三行（类似于 1,2）并在两行之间移动项目怎么办。同样，要重新排序您的示例，我必须移动 div 3（我不能将 div 1 和 2 移动到 div 3 上方）...

@Ron，jQueryUI 站点禁用了热链接，这是更新的链接：jsfiddle.net/w7ZvQ

@iSid，一般情况下不是这样，例如，您如何避免此处出现间隙：imgur.com/K3KQOMQ 但如果所有 portlet 具有相同的宽度，并且您想要 Pinterest 样式布局，您可以创建几个可排序并排，并允许在它们之间拖动：jsfiddle.net/4zKp9

@iSid 或者如果您只是想阻止 imgur.com/LoMdnQP，并且希望 portlet 标头始终对齐，您可以将它们设置为内联块：jsfiddle.net/e4Y2r

@AlexeyLebedev 不确定我是否理解。虽然，I found this which worked for me。任何方式，非常感谢您提供解决方案。