如何从单列文章数据源中显示多列文章？

Question

如何从单个文章来源创建多列文章的最简洁方法是什么？所以文章来源只是一篇长文章，没有任何剪切信息。然后，网页从数据库中读取它，然后将其显示在“具有相同高度的多列”格式中，如在报纸中，或在Microsoft Word中。问题是我需要尽可能地做到最干净，并且我需要能够在我（或用户）想要的时候更改多少列，而根本不需要更改文章数据源。有没有一种简单的方法在javascript和CSS中执行此操作？我知道如何创建div，但要指定剪切文章的位置或计算的行数，这超出了我目前对javascript的理解。感谢。

Answer 1

最干净，最简单的方法是使用column-count。

div {
    -webkit-column-count:3; /* Chrome, Safari, Opera */
    -moz-column-count:3; /* Firefox */
    column-count:3;
} 

DEMO

请注意，并非在所有（较旧的）浏览器中都支持，请查看第一个链接以查看支持！

Answer 2

将其与媒体查询一起用于响应性

<强> Demo

CSS

article p {
    -moz-column-rule: 1px solid #ccc;
    -webkit-column-rule: 1px solid #ccc;
    column-rule: 1px solid #ccc;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

@media only screen and (min-width: 500px) {
  article p {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;      
  }
}