源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程</title> <style> .newspaper { /* Chrome, Safari, Opera */ -webkit-column-count: 3; -webkit-column-gap: 40px; -webkit-column-rule-style: outset; -webkit-column-rule-width: 1px; /* Firefox */ -moz-column-count: 3; -moz-column-gap: 40px; -moz-column-rule-style: outset; -moz-column-rule-width: 1px; column-count: 3; column-gap: 40px; column-rule-style: outset; column-rule-width: 1px; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 當我年輕的時候,我夢想改變這個世界;當我成熟以後,我發現我不能夠改變這個世界,我將目光縮短了些,決定只改變我的國家;當我進入暮年以後,我發現我不能夠改變我們的國家,我的最後願望僅僅是改變一下我的家庭,但是,這也不可能。當我現在躺在床上,行將就木時,我突然意識到:如果一開始我僅僅去改變我自己,然後,我可能改變我的家庭;在家人的幫助和鼓勵下,我可能為國家做一些事情;然後,誰知道呢?我甚至可能改變這個世界。 </div> </body> </html>
運行結果