[CSS]column

CSS3提供了column屬性,透過column屬性可以很快速的針對元素做分欄

使用時請注意瀏覽器支援問題

出師表範例
HTML

<p>
	臣亮言:先帝創業未半,而中道崩殂;今天下三分,益州疲敝,此誠危急存亡之秋也。然侍衛之臣,不懈於內;忠志之士,忘身於外者:蓋
	追先帝之殊遇,欲報之於陛下也。誠宜開張聖聽,以光先帝遺德,恢弘志士之氣;不宜妄自菲薄,引喻失義,以塞忠諫之路也。宮中府中,
	俱為一體;陟罰臧否,不宜異同:若有作奸犯科,及為忠善者,宜付有司,論其刑賞,以昭陛下平明之治;不宜偏私,使內外異法也。侍中
	、侍郎郭攸之、費依、董允等,此皆良實,志慮忠純,是以先帝簡拔以遺陛下:愚以為宮中之事,事無大小,悉以咨之,然後施行,必得裨
	補闕漏,有所廣益。將軍向寵,性行淑均,曉暢軍事,試用之於昔日,先帝稱之曰“能”,是以眾議舉寵為督:愚以為營中之事,事無大小,
	悉以咨之,必能使行陣和穆,優劣得所也。親賢臣,遠小人,此先漢所以興隆也;親小人,遠賢臣,此後漢所以傾頹也。先帝在時,每與臣
	論此事,未嘗不嘆息痛恨於桓、靈也!侍中、尚書、長史、參軍,此悉貞亮死節之臣也,願陛下親之、信之,則漢室之隆,可計日而待也。

	臣本布衣,躬耕南陽,苟全性命於亂世,不求聞達於諸侯。先帝不以臣卑鄙,猥自枉屈,三顧臣於草廬之中,諮臣以當世之事,由是感激,
	遂許先帝以驅馳。後值傾覆,受任於敗軍之際,奉命於危難之間:爾來二十有一年矣。先帝知臣謹慎,故臨崩寄臣以大事也。受命以來,夙
	夜憂慮,恐付託不效,以傷先帝之明;故五月渡瀘,深入不毛。今南方已定,甲兵已足,當獎帥三軍,北定中原,庶竭駑鈍,攘除奸兇,興
	復漢室,還於舊都:此臣所以報先帝而忠陛下之職分也。至於斟酌損益,進盡忠言,則攸之、依、允等之任也。願陛下托臣以討賊興復之效
	,不效則治臣之罪,以告先帝之靈;若無興復之言,則責攸之、依、允等之咎,以彰其慢。陛下亦宜自謀,以諮諏善道,察納雅言,深追先
	帝遺詔。臣不勝受恩感激!今當遠離,臨表涕泣,不知所云。
</p>

CSS

p {
	/* 欄位 */
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;

	/* 間距 */
	column-gap: 30px;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;

	/* 邊線 */
	column-rule:1px solid #000;
	-moz-column-rule:1px solid #000;
	-webkit-column-rule:1px solid #000;
}

[jQuery]Masonry

[jQuery]滑出式選單