前端：css应用实现多列效果

最新推荐文章于 2022-03-15 23:59:51 发布

名字长就有小可爱跟着念

最新推荐文章于 2022-03-15 23:59:51 发布

阅读量125

点赞数

分类专栏：笔记前端文章标签： css3 html

本文链接：https://blog.csdn.net/qq_44787874/article/details/110230573

版权

笔记同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

前端

18 篇文章 0 订阅

订阅专栏

多列：实现网页布局

概念：

引入例子来实现

先写一个HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>beijingshezhi</title>
		<link href="css/new_file.css" type="text/css" rel="stylesheet" />
	</head>
	<body >
		<div class="div">我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，
		我超级可可爱我是一个显可爱的人，
		我超级可可爱我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，
		我超级可可爱我是一个显可爱的人，
		我超级可可爱我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，
		我超级可可爱我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		我是一个显可爱的人，我超级可可爱
		
		
		
		
		
		
		</div>
		
	</body>
</html>

再来对网页进行设计：

在写一个css文件：


.div{
	
	background-color: antiquewhite;
	column-count: 4;/* 设置列数 */
	column-gap: 30px;/* 设置每列的宽度 */
	column-rule: 2px outset red;/* 设置分隔符的样式 2px 外显，红色*/
	-webkit-column-count: 4;
	-webkit-column-gap: 30px;
	-webkit-column-rule: 2px outset red;
	
}

让我们来看下实现的效果：

在这里插入图片描述

完成，更多css用法，看其他博客》》》

名字长就有小可爱跟着念

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端：css应用实现多列效果

多列：实现网页布局概念：引入例子来实现先写一个HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>beijingshezhi</title> <link href="css/new_file.css" type="text/css" rel="stylesheet" /> </head> <body &gt
复制链接

扫一扫