Jquery 拆分将在多个列上显示的内容

场景：

您有一个CMS，用户可以在其中确定将显示哪些内容。 内容由多个柱组成，柱下有链接。它看起来像这样：

列名
链接1链接2链接3链接4
链接5链接6链接7
链接8链接9链接10

列名称2
链接1链接2链接3链接4
链接5链接6链接7
链接8链接9链接10
列名称3
链接1链接2链接3链接4
链接5链接6链接7
链接8链接9链接10

列名称4
链接1链接2链接3链接4
链接5链接6链接7
链接8链接9链接10

当此列表过长时，内容将拆分为两列。 现在，内容将在mozilla中使用css3进行拆分->并在IE中使用JQuery库进行类似操作

CSS

.columns{
-moz列数：2；
-moz柱间距：30px；
-webkit列数：2；
-webkit柱间隙：30px；
列数：2；
柱间距：30px；
}
###网络表单

正如您看到的，这是在客户端处理的，这样做的效果是文本将被拆分，而不确保列不会被拆分

这就是效果：

现在这是客户端解决的问题，因此内容将被分解并拆分为两列。 有没有什么好方法可以解决服务器端有两个漂亮的列，并通过一些逻辑来确定这些列是否具有相似的高度？

---

如何解决这个问题？

< P>服务器端做的唯一方法是计数字符/单词/链接，并在中间某个地方分割，但这只会给你一个近似值。如果你的文本足够长，那就足够了

---

从我在带有橙色文本的图像中看到的情况来看，窄列中有长单词。这意味着如果拆分服务器端，您将遇到显著的变化。

如果您的字体是单间距字体（所有字符都具有相同的宽度），您可以计算字符数，并按此顺序在每列中计算相等的字符数。然而，因为你的字体很可能不是单空格（因为它非常难看）。根据文本的不同，该方法将产生不同的结果

---

我认为css3和JS回退是实现这一点的好方法。

考虑到您对Hannes答案的评论，最好的服务器端方式是按组（例如，类似于“centrum senioren”的内容进行分割将构成一个组。去掉标记以避免结果倾斜，并计算每个组的字符数。使用该方法可以获得将列分隔符放置在何处的经验法则

---

不过，我同意前面的海报；客户端是处理这个问题的更好地方。尝试在CSS中使用

分栏：避免对您的组使用
。
服务器几乎肯定对页面的布局（呈现）知之甚少但是，如果有人试图建议服务器端解决方案，他们可能会想知道您使用的是哪种cms。这样做的结果是，在未“完成”时，列甚至会被拆分内容方面。你可以在“centrum senioren”专栏中看到这一点。这一列被拆分，但仍有链接要生成。我们不希望将属于一起的内容拆分。好的，这是我们已经想到的。谢谢你的回答，我将等待更多答案。
.columns {
 -moz-column-count: 2;
 -moz-column-gap: 30px;
 -webkit-column-count: 2;
 -webkit-column-gap: 30px;
 column-count: 2;
 column-gap: 30px;
}


### WEB FORM
<!--[if lte IE 9]>
<script src="/Estate/Scripts/Libraries/autocolumn.min.js" type="text/javascript"></script>
<script type="text/javascript">
 if (Estate.Sitefinity.IsInEditMode() == false) {
  jQuery('#MultiColumn').columnize({
   columns: 2,
   buildOnce: true
  })
 }
</script>
<![endif]-->