CSS3 Column
CSS Column是用來幫助文章排列的一種屬性工具，
其屬性有column-count、column-gap、column-rule-style、
column-rule-width、column-rule-color、column-rule、
column-span、column-width、column-fill、columns，其實本文章的重點就是學習各個column屬性的用法。
由於CSS Column是個很新的規格，請注意非IE(IE9以下不支援)的瀏覽器如要正常顯示，
則請加上prefix，例如：
div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }
一、column-count
說明：用來定義欄位數量
<!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } </style> </head> <body> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body> </html>
二、column-fill
說明：指定文字內容選擇平均填入( balance )指定欄位數或是根據元素所指定的高度將文字內容填完為止( auto )，預設值為 balance。
引用w3cSchool範例
<!DOCTYPE html> <html> <head> <style> div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; height: 100px; } .newspaper1 { -moz-column-fill: auto; /* Firefox */ column-fill: auto; } .newspaper2 { -moz-column-fill: balance; /* Firefox */ column-fill: balance; } </style> </head> <body> <h1>The column-fill Property</h1> <h2>column-fill: auto:</h2> <div class="newspaper1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat... </div> <h2>column-fill: balance (default):</h2> <div class="newspaper2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat... </div> </body> </html>
三、column-gap
說明：指定欄位空隙寬度
<!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 60px; /* Chrome, Safari, Opera */ -moz-column-gap: 60px; /* Firefox */ column-gap: 60px; } </style> </head> <body> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body> </html>
四、column-span
說明：指定元素於column屬性的影響下，用來指定顯示範圍是否可跨行，
其值只能為 all 或 none。
<!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid lightblue; /* Firefox */ column-rule: 1px solid lightblue; } h2 { -webkit-column-span: all; /* Chrome, Safari, Opera */ column-span: all; } </style> </head> <body> <div class="newspaper"> <h2>Lorem Ipsum Dolor Sit Amet</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body> </html>
五、column-width
說明：故名思義，就是指定 column 的寬度，
瀏覽器可以根據指定 column-width 屬性與文字內容多寡作最少欄位數的安排。
column-width 屬性的單位是 px ，預設值為 auto，column-width 屬性跟 column-count 屬性可以同時存在，
column-count 屬性擁有優先權可以覆蓋掉 column-width 屬性。
<!DOCTYPE html> <html> <head> <style> .newspaper { column-width: 100px; column-count: 3; } </style> </head> <body> <h1>The column-count Property</h1> <p>The column-count property defines the number of columns an element is divided into:</p> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </div> <p><strong>Note:</strong> The column-count property is not supported in Internet Explorer 9 and earlier versions.</p> </body> </html>
六、columns
預設值為 auto ，columns 屬性為 column-width 與 column-count 屬性的簡寫，其文法為，
columns: auto|column-width column-count|initial|inherit;
七、column-rule-style
說明：欄與欄之間的線條樣式，預設值為 none。
<!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; } </style> </head> <body> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body> </html>
八、column-rule-width
說明：欄與欄之間的線條寬度，預設值為 medium。
<!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; -webkit-column-rule-width: 10px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 10px; /* Firefox */ column-rule-width: 10px; } </style> </head> <body> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body> </html>
九、column-rule-color
說明：欄與欄之間的線條色彩，預設值為元素本身的顏色。
<!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */ -moz-column-rule-color: lightblue; /* Firefox */ column-rule-color: lightblue; } </style> </head> <body> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body> </html>
十、column-rule
說明：為column-rule-width、column-rule-style、column-rule-color的簡寫。
文法為：
column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;
<!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid lightblue; /* Firefox */ column-rule: 1px solid lightblue; } </style> </head> <body> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body> </html>
參考資料：