【css】最简单的瀑布流布局方法

最新推荐文章于 2024-02-02 16:20:07 发布

汪小穆

最新推荐文章于 2024-02-02 16:20:07 发布

阅读量1.1w

点赞数 4

分类专栏： css 文章标签： column-count 纯css瀑布流布局瀑布流布局

本文链接：https://blog.csdn.net/w390058785/article/details/82775897

版权

css 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

前言：用column-count就能实现简单的瀑布流布局

一、代码

<body>
<style>
	.parent { 
		width:100%;
		-moz-column-count: 4;
                -webkit-column-count: 4;
                column-count: 4;
	 }
	 .child {
		margin-bottom:20px;	 
		-moz-page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
                break-inside: avoid;
		color:#fff;
	 }
	 .child:nth-of-type(1){ height:100px; background:#000; }
	 .child:nth-of-type(2){ height:120px; background:#111; }
	 .child:nth-of-type(3){ height:140px; background:#222; }
	 .child:nth-of-type(4){ height:160px; background:#333; }
	 .child:nth-of-type(5){ height:180px; background:#444; }
	 .child:nth-of-type(6){ height:200px; background:#555; }
	 .child:nth-of-type(7){ height:220px; background:#666; }
	 .child:nth-of-type(8){ height:240px; background:#777; }
</style>
<div class="parent">
	<div class="child">1</div>
        <div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
        <div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>
</body>