【笔记】学习CSS布局17——column

最新推荐文章于 2022-11-30 10:35:01 发布

二木成林

最新推荐文章于 2022-11-30 10:35:01 发布

阅读量255

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/cnds123321/article/details/84638355

版权

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

代码实例：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.three_column {
			padding: 1em;
			-moz-column-count:3;
			-moz-column-gap:1em;
			-webkit-column-count:3;
			-webkit-column-count:3;
			column-count:3;
			column-gap:1em;
			background-color: #6ac5ac;
		}
	</style>
</head>
<body>
	<div class="three_column">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
	</div>
</body>
</html>

效果图如下：