用於文本的HTML流體多列布局（報紙）

有沒有任何CSS技術或用於佈置內容的好js技術，以便您擁有「報紙」一樣的頁面。給定一個包含大量內容的div（或其他），將這些內容分成N列，這些列總共有一些預定義的寬度。用於文本的HTML流體多列布局（報紙）

讓我們從一個N = 3說，假設我的內容進行分類A - > Q將呈現以下方式的數據：

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

任何想法？我想在渲染3個div之前不要在服務器上分割數據，這樣我就不需要真正計算數據如何渲染。但是，這是可能發生的最後一招。

來源

2011-04-27 Dmitriy Likhten

你想你的佈局做的，如果內容溢出過去的最後一列？ – LostLin 2011-04-27 02:58:01

看看這篇文章：http://www.alistapart.com/articles/css3multicolumn/

來源

2011-04-27 02:13:30 jessegavin

我知道這是有點晚真正回答這個德米特里，但任何人都被這個問題路過，這裏是一個github上的項目，金融時報，這將做到這一點的你： FTColumnflow： https://github.com/ftlabs/ftcolumnflow 下面是該項目的功能列表：

配置列的寬度，水槽和利潤率
固定位置的元素
元素跨越列
保持與 - 下一避免標題在列
無包裝類別的底部，以避免跨列
分組列的分裂元素融入網頁
水平或垂直的頁
標準化線高度對齊文本基線到網格對齊
所要求的事件，如設備方向或字體大小改變快速回流

來源

2013-02-03 13:40:14 Rocel

謝謝！這確實是一個很好的參考。 – 2013-02-04 14:39:12

是在除IE瀏覽器的人工作得很好...網頁錯誤的詳細信息用戶代理：Mozilla的/ 4.0（兼容; MSIE 8.0; Windows NT的5.1;三叉戟/ 4.0; .NET CLR 2.0.50727; .NET4.0C; .NET4.0E; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729）時間戳：星期六，2013年8月31日9點32分45秒UTC 消息：預期 '：' 行：1320 字符：7 代碼：0 URI：HTTP：//localhost/blog/src/FTColumnflow.js – 2013-08-31 09:35:40

用於文本的HTML流體多列布局（報紙）

回答

相關問題