使用分栏布局实现瀑布流效果 纯css实现瀑布流效果

网红业务平台

专业的网络业务代刷平台

立即前往
首页 » 技术教程 » 正文

使用分栏布局实现瀑布流效果 纯css实现瀑布流效果

下面我简单写了一个demo分享给大家

其中

    column-count 用来设置列数

    column-gap 用来设置列间距

    break-inside: avoid; 避免在元素内部断行并产生新列附代码如下:

CSS
	body{
		width: 100%;
		height: 100%;
		background: #000;
	}
	.box{
		width: 600px;
		background: #fff;
		margin: 0 auto;
		/*column-count用来设置列数*/
	    column-count: 3;
	    /*column-gap用来设置列间距*/
	    column-gap: 0;
	}
	.box div{
		width: 150px;
		padding: 25px;
	    /*避免在元素内部断行并产生新列*/
	    break-inside: avoid;
	}
	.box div img{
		width: 100%;
	}
HTML


	 class="box">
		
src="img/1.jpg">
src="img/2.jpg">
src="img/3.jpg">
src="img/4.jpg">
src="img/5.jpg">
src="img/6.jpg">
src="img/7.jpg">
src="img/8.jpg">
src="img/9.jpg">
src="img/10.jpg">

    作者:鹏仔先生

            需要技术支持可以联系鹏仔呦!

    个人QQ:344225443

免责声明:本站提供的软件、教程仅限学习和研究;不得用于商业或非法用途,否则一切后果请用户自负,如有侵权请邮件与我们联系处理

评论 抢沙发

评论前必须登录!

  注册



切换注册

登录

忘记密码 ?

切换登录

注册