css - 文本的 HTML 流体多列布局(报纸)

Question

有没有什么 CSS 技术或好的 js 技术来布局内容，让你有一个像“报纸”一样的页面。给定一个包含一堆内容的 div(或其他)，将该内容拆分为 N 列，总宽度为一些预定义的宽度。

假设 N = 3，假设我的内容排序为 A -> Q 将以下列方式呈现数据:

 A  G  M
 B  H  N
 C  I  O
 D  J  P
 E  K  Q
 F  L  

有什么想法吗？我不想在呈现 3 个 div 之前拆分服务器上的数据，这样我就不需要真正计算数据的呈现方式。然而，这是可能发生的最后手段。

Answer 1

我知道现在回答 Dmitriy 有点晚了，但是对于任何路过这个问题的人来说，这里有一个来自金融时报的 github 元素，它会为你做这个:FT列流: https://github.com/ftlabs/ftcolumnflow以下是该元素的功能列表:

• 可配置的列宽、间距和边距
• 固定位置元素
• 元素跨列
• Keep-with-next 以避免标题位于列的底部
• 无包装类以避免跨列拆分元素
• 将列分组到页面中
• 页面的水平或垂直对齐方式
• 标准化行高，使文本基线与网格对齐
• 根据设备方向或字体大小更改等事件的需要快速重排