用css3的 clomus 布局 怎么写瀑布流

首先，css3的布局主要用到下面三个属性

column-count

column-gap

column-rule

其次，在兼容column的浏览器中可以实现瀑布流，代码如下

.demo{
    width: 500px;
    height: auto;

    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;

    -webkit-column-gap:10px;
    -moz-column-gap:10px;
    column-gap:10px;

    column-rule:3px outset #ff0000;

    border: 1px solid #ddd;
}
.demo div{
    background: #336699;
    margin-bottom: 4px;
    color: #eee;
    padding: 10px;
}

        
1这是测试用的文字，测试能不能实现瀑布流。

        
2这是测试用的文字，测试能不能实现瀑布流。

        
3这是测试用的文字，测试能不能实现瀑布流。

        
4这是测试用的文字，测试能不能实现瀑布流。

        
5这是测试用的文字，测试能不能实现瀑布流。

        
6这是测试用的文字，测试能不能实现瀑布流。

        
7这是测试用的文字，测试能不能实现瀑布流。

        
8这是测试用的文字，测试能不能实现瀑布流。

        
9这是测试用的文字，测试能不能实现瀑布流。

        
11这是测试用的文字，测试能不能实现瀑布流。

        
12这是测试用的文字，测试能不能实现瀑布流。

        
13这是测试用的文字，测试能不能实现瀑布流。

        
14这是测试用的文字，测试能不能实现瀑布流。

        
15这是测试用的文字，测试能不能实现瀑布流。

        
16这是测试用的文字，测试能不能实现瀑布流。

        
17这是测试用的文字，测试能不能实现瀑布流。

        
18这是测试用的文字，测试能不能实现瀑布流。

        
19这是测试用的文字，测试能不能实现瀑布流。