打破多列div答案

【问题标题】：Break multi-column div打破多列div
【发布时间】：2012-03-09 21:35:05
【问题描述】：

我正在使用 CSS3 多栏来让我的博客看起来像印刷杂志，但较长的帖子无法完全显示在屏幕上，并且需要笨拙的滚动。有没有办法闯入，比如说，500px 高的 div，以便读者可以在滚动之前阅读一个 3 列的文本块？

我尝试使用 jQuery 每 6 个段落插入一个 column-span: all 跨度，但这会产生不一致的高度结果。

有什么想法吗？

这是example post（警告：列在 IE 中不起作用，抱歉。这是另一个问题）。

【问题讨论】：

【解决方案1】：

将所有这些建议记在下面。我已经找到了你需要的东西。您需要 CSS3 区域。它允许您将一个区域的溢出设置为流入另一个区域。只需设置您的高度，然后为流flow-into: whatever; 和flow-from: whatever; 设置CSS3 命令。快！为每个浏览器使用前缀，例如-webkit-flow-into: whatever;

我认为您需要 javascript。列跨度是一个好主意，因为它会像您需要的那样将其分解，但是很难获得<hr /> 或您曾经在正确位置垂直的任何内容。我找到了一个链接，其中包含一些代码来检测溢出并将其放在另一个 div 中。我没有检查它是否有效，但这是个好主意。

http://www.webdeveloper.com/forum/showthread.php?t=200616

您还可以根据字符数插入带有column-span: all 的元素，这将比段落数更加一致。

【讨论】：

谢谢！我想知道这个字符数的可能性。我根本不是 JS 专家。简单的方法来做到这一点？也许这个函数包含在 jQuery 中？
更新了我的答案。看看吧。