如何防止在具有跨浏览器支持的CSS列属性中破坏div？

Question

这是我的HTML：

<section style="-webkit-column-count:3">
  <div class="item">
    <h2></h2>
    <p>…</p>
    <p> Read More &mdash; <a  href="link.htm"></a></p>
    <hr>
  </div>
  <div class="item">
  ..
  </div>
  .
  .
  .
</section>

在页面底部，带有项类的div分为两部分，以保持相等的列高度。如何在底部保持个人div？ 让我知道如果我没有清楚地解释这个问题。

这是一个jsFiddle：http://jsfiddle.net/j35toyju/

您将看到这些项目不在一个完整的区块中。有时，标题位于底部，其余部分位于顶部。其他时候一切都在底部，只是链接在顶部。

This question提供了答案，但它仅适用于Google Chrome。有没有办法让它在所有浏览器中都有效。如果在纯CSS中不可能使用JavaScript？