CSS3 multiple columns 多欄文字

有了 CSS3 網頁文字也可以像雜誌一樣分欄排列了
做成3欄式的就像這樣滴：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at magna at dui sagittis accumsan. Proin consectetur, mi et cursus accumsan, neque tellus laoreet leo, eu pretium massa est a lectus. Proin porta, quam eu tincidunt luctus, ipsum ligula tristique leo, sed imperdiet ante magna non tortor. Nulla non nisi velit, consequat pulvinar neque. Donec justo massa, tincidunt ac ornare et, semper ut ipsum. Suspendisse potenti. Ut sapien erat, pharetra ut commodo sed, dapibus a nulla. Morbi sed feugiat dolor. Phasellus libero nunc, porta vitae pretium at, feugiat eget nisl.
Duis faucibus luctus purus nec hendrerit. Nullam sed massa non metus ornare convallis. Donec fermentum leo eget justo fringilla aliquet. Donec non mauris ipsum. Etiam rhoncus elit euismod sapien auctor gravida. Integer risus eros, sollicitudin id tristique sit amet, dapibus id diam. Nam pulvinar lorem elit. Morbi eros arcu, gravida quis blandit at, eleifend non enim. Sed eget risus eros. Donec ut fringilla risus.

把文字分成三欄

div{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;
}

設定文字中間的間隔40px

div {
  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;
}

設定文字欄位寬度為100px

div {
  -moz-column-width:100px; /* Firefox */
  -webkit-column-width:100px; /* Safari and Chrome */
  column-width:100px;
} 

W3Schools有更多 CSS3 多欄文字的語法解說
http://www.w3schools.com/css3/css3_multiple_columns.asp

IE 無法顯示多欄文字的CSS3語法！！！

不過...一如以往，IE到現在還是不支援 CSS3 的 multiple columns ，所以這樣的分欄顯示文字的方式，在其他主流瀏覽器都是沒問題的， 唯 IE 還是看不見。

解決方案 jQuery.column

當然，網路上總還是有熱心人士，會提供我們 jQuery 解決方案，實在是太感謝啦！

jQuery.column
http://www.vanderlee.com/martijn/?page_id=229