CSS3 columns的使用

<!DOCTYPE html>
<html>
<head>
    <title>column attr</title>
    <meta charset="utf-8" />
    <style type="text/css">


        div.col-3 {
            column-count: 3;
            column-gap: 5px;
        }

        div.col-3 h3 {
            column-span: all;
            text-align:center;
            background: #eee;
        }
    </style>
</head>
<body>
<div class="col-3">
    <h3>这是表头</h3>
    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。
</div>
</body>
</html>

演示地址
http://xhope.top/samples/html/columns.html