CSS3 column-fill 属性-在线运行代码案例-大卫编程网

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 column-fill 属性示例- 基础教程(div.cn)</title>
<style>
	p.columns {
        /* Chrome, Safari, Opera */
		-webkit-column-count: 3;
        /* Firefox */
		-moz-column-count: 3;
        -moz-column-fill: auto;
        /* Standard syntax */
		column-count: 3;
        column-fill: auto;
	}
</style>
</head>
<body>
    <p><strong>注意:</strong> 当前Firefox中只支持-moz-前缀的列填充属性.</p>
    <p class="columns">千里之行始于足下，九层之台,起于累土。一个好的开始，对未来的学习极其的重要。而持续性的迈出第二步，第三步，则会让自己逃脱自己形式上的第一步带来的错觉，带来的美梦。梦始终会醒来，与其被动地被闹钟叫醒，不如自己醒来，走出来，坚持下去，直到成功。
    
    千里之行始于足下，九层之台,起于累土。一个好的开始，对未来的学习极其的重要。而持续性的迈出第二步，第三步，则会让自己逃脱自己形式上的第一步带来的错觉，带来的美梦。梦始终会醒来，与其被动地被闹钟叫醒，不如自己醒来，走出来，坚持下去，直到成功。
    
    千里之行始于足下，九层之台,起于累土。一个好的开始，对未来的学习极其的重要。而持续性的迈出第二步，第三步，则会让自己逃脱自己形式上的第一步带来的错觉，带来的美梦。梦始终会醒来，与其被动地被闹钟叫醒，不如自己醒来，走出来，坚持下去，直到成功。
    
   千里之行始于足下，九层之台,起于累土。一个好的开始，对未来的学习极其的重要。而持续性的迈出第二步，第三步，则会让自己逃脱自己形式上的第一步带来的错觉，带来的美梦。梦始终会醒来，与其被动地被闹钟叫醒，不如自己醒来，走出来，坚持下去，直到成功。
    
    千里之行始于足下，九层之台,起于累土。一个好的开始，对未来的学习极其的重要。而持续性的迈出第二步，第三步，则会让自己逃脱自己形式上的第一步带来的错觉，带来的美梦。梦始终会醒来，与其被动地被闹钟叫醒，不如自己醒来，走出来，坚持下去，直到成功。</p>
</body>
</html>