移动端瀑布流

最新推荐文章于 2025-05-25 12:15:32 发布

夜惊如水

最新推荐文章于 2025-05-25 12:15:32 发布

阅读量678

点赞数

CC 4.0 BY-SA版权

分类专栏： html文件

本文链接：https://blog.youkuaiyun.com/qq_41422208/article/details/89495802

html文件专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <style type="text/css">
		body,html{
			height: 100%;
			margin: 0;
			padding: 0;
		}
		*{
			margin: 0;
			padding: 0;
		}
    	.home-page{
			min-height: 100%;
		}
.box{ 
                -moz-column-count:2; /* Firefox */
                -webkit-column-count:2; /* Safari 和 Chrome */
                column-count:2;
                -moz-column-gap: 1px;
                -webkit-column-gap: 1px;
                column-gap: 1px;
                width: 80%;
                margin:0 auto;
            }
            .item { 
                  width: 100%;
				  height: 100px;
                margin-bottom: 1px;
                -moz-page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
                break-inside: avoid;
                background: #f60;
            }
			.items { 
			    width: 100%;
				height: 80px;
			    margin-bottom: 1px;
			    -moz-page-break-inside: avoid;
			    -webkit-column-break-inside: avoid;
			    break-inside: avoid;
			    background: #f60;
			}
    </style>
</head>
<body>
	<div class="home-page">
		<div class="box"> 
            <div class="items"> 
                <div> 1
                </div> 
            </div> 
            <div class="items"> 
                <div> 2
                </div> 
            </div>
            <div class="items"> 
                <div> 3
                </div> 
            </div>
            <div class="item"> 
                <div> 4
                </div> 
            </div>
            <div class="items"> 
                <div> 5
                </div> 
            </div>
            <div class="item"> 
                <div> 6
                </div> 
            </div> 
            <div class="item"> 
                <div> 7
                </div> 
            </div>
            <div class="items"> 
                <div> 8
                </div> 
            </div>
            <div class="item"> 
                <div> 9
                </div> 
            </div>
            <div class="items"> 
                <div> 10
                </div> 
            </div>
            <div class="items"> 
                <div > 11
                </div> 
            </div>
            <div class="item"> 
                <div > 12
                </div> 
            </div>
        </div>
	</div>
	<script type="text/javascript" charset="utf-8">
	  	
	</script>
</body>
</html>