如何从单列项目数据源显示多列项目？
提问于 2014-05-03 00:26:09
如何最干净地从单个文章源创建多列文章？因此，文章来源只是一篇长篇文章，没有任何剪裁信息。然后，网页从数据库中读取它，然后以“多列等高”格式显示，比如在报纸上，或者在Microsoft中。问题是，我需要尽可能干净地这样做，而且我需要能够随时更改我(或用户)想要的列数，而不需要更改文章数据源。在javascript和css中有什么简单的方法可以做到吗？我知道如何创建div，但是要指定在哪里删除文章或计算多少行，这超出了我目前对javascript的理解。谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-03 00:35:55
最干净和最简单的方法是使用column-count。
div {
-webkit-column-count:3; /* Chrome, Safari, Opera */
-moz-column-count:3; /* Firefox */
column-count:3;
} 演示。
请注意，并不是所有(旧的)浏览器都支持它，请检查第一个链接以查看支持！
Stack Overflow用户
发布于 2014-05-03 01:07:44
将它与媒体查询一起使用以获得响应性
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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23441985
复制相关文章
腾讯云开发者
