多列布局

最新推荐文章于 2021-07-11 13:50:12 发布

web-Queen

最新推荐文章于 2021-07-11 13:50:12 发布

阅读量145

点赞数

文章标签： CSS3多列布局

本文链接：https://blog.csdn.net/weixin_45626166/article/details/101017305

版权

多列布局的属性和子属性

在这里插入图片描述
常用属性及浏览器兼容

** 响应式常用的布局尺寸**

columns复合属性；（队列宽度和列数的复合属性）

	<style>
			.big{
				-moz-columns:200px 2 ;/*火狐的Gecko内核*/
				-webkit-columns:200px 2 ;/*谷歌webkit内核*/
				-ms-columns:200px 2 ;/*IE的Trident内核*/
				columns: 200px 2 ;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
			<div>列2</div>
			<div>列3</div>
			<div>列4</div>
			<div>列5</div>
			<div>列6</div>
		</div>
	</body>

column-width：队列的宽度

<style>
			.big{
				-moz-column-width:100px;/*火狐的Geock的内核*/
				-ms-column-width:100px;/*Ie的Trident的内核*/
				-webkit-column-width: 100px;/*谷歌内核*/
				column-width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
			<div>列2</div>
			<div>列3</div>
			<div>列4</div>
			<div>列5</div>
			<div>列6</div>
		</div>