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

最新推荐文章于 2022-03-15 23:59:51 发布
最新推荐文章于 2022-03-15 23:59:51 发布
阅读量127 收藏 1
点赞数
分类专栏： 笔记 前端 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44787874/article/details/110230573
版权

多列：实现网页布局

概念：在这里插入图片描述

引入例子来实现

先写一个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
    评论
专栏目录
html如何设置一行多列,如何实现一行多列？
weixin_30898555的博客
06-19 3408
1 .Bootstrap 中可以引用 row 属性确定元素属于通一行，确定每个元素大小以及偏移量Title第一列第二列第三列2. CSS3 新增的多列布局Title.multi_column {-webkit-column-count: 3; // 表示布局几列-webkit-column-rule: 1 px solid #bbb; //表示列与列之间的间隔条的样式-web...
前端之多列布局
weixin_46372074的博客
03-14 1060
前端之多列布局多列布局 -- 父容器属性设置列数设置至少列宽给多列增加样式列间隙列间的线列与内容折断break-inside 多列布局 – 父容器属性 设置列数 column-count 指定列数 设置至少列宽 column-width 设置多列布局中的理想列宽。任何列的宽度都不会小于该值。 给多列增加样式 列间隙 column-gap 设置使用元素列之间的间隔. 间隔的宽度和列的宽度与总的页面宽度不能相互满足时,就会出现列减少. 列间的线 column-rule: 是column-rule-
实现数据多行多列显示
snowme103的专栏
02-20 720
以前展示的数据都是 一行一行的显示，而且是显示多个字段的!一般从数据库中获取到记录集 就将记录集记录集循环输出，每一条记录占一行，每条记录都有好几个字段的如果需求只要显示一个字段 而且对记录没有什么操作的话（最多有个链接），一个字段占用很宽的一行 很不美观，需要每行显示多个，如3个：sql语句就应该顺序排列，并查出rownum，这样每条记录就没编号了，rownum分别为1,2,3........因...
css 每行平均放几个_前端——6张思维导图，帮你搞定html、css
weixin_42502075的博客
01-13 120
先给大家看一张喜欢的图片，缓解下心情，最近敲敲代码累的时候都会看看这几个小活宝，每次都忍不住伸手去摸一下屏幕，可爱到爆，不由自主的就笑了出来。这个是电影《鼠来宝》系列的海报图。不知道有没有人喜欢这几只会唱歌的小活宝。这几天看了 一下之前整理的html和css的知识点，发现很多东西都有点忘了，趁此机会，复习了一下，也重新整理了一下，决定放出来，也给刚入门的孩纸们一个参考，之前有简友说图片看不清，电脑...
css多列
码上行动
06-18 63
css多列 1、column­count:列数; 分割成几列 2、column-gap:50px; 列之间的距离 3、column-rule:2px solid red; 列之间的分隔线 4、column-fill:auto/balance; 内容排列的高度 auto: 前面填满、空白留在最后一列； balance: 空白平分在每一列； 5、column-span：none/all; all: 标题跨所有的列（text-align居中） 6、colum
前端——多行三列模式页面布局
我们都有光明的未来
04-22 2573
纪念一下难得听课的前端 <!doctype html> <html> <head> <meta charset="utf-8"> <title>多行三列模式页面布局</title> <style type="text/css"> @import url("out.css"); </style> ...
批量输入<li></li>的简便方法~~~~·
进击的WEB前端-小黄毛
01-28 1239
批量输入 <li></li> 里面内容 简便方法
HTML中table标签的跨多行和多列布局方法
热门推荐
weixin_37861326的博客
06-25 3万+
先放一张布局效果效果图在实现这一布局效果时，主要应用了rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列，在其他行或者列中也是占位的。比如：第一项项目基本信息是跨过5行，因此在接下来的4行中，第一列已经是默认被占了，行中的td列是从第二列开始布局；最后一行，项目得分占据6列，因此第二个td实际对应的是该行的第七列。具体实现代码如下：HTML布局代码：&lt;!-- 明细表 --&...
JavaScript前端数据呈现——Table会拐弯的column，数据分多列展示
weixin_40541945的博客
03-15 1802
一个数据源，前端数据分多列展示，带有汇总的表格展示
一列保存多个ID（将多个用逗号隔开的ID转换成用逗号隔开的名称）
weixin_34348174的博客
07-19 1156
背景：在做项目时，经常会遇到这样的表结构在主表的中有一列保存的是用逗号隔开ID。如，当一个员工从属多个部门时、当一个项目从属多个城市时、当一个设备从属多个项目时，很多人都会在员工表中加入一个deptIds VARCHAR(1000)列（本文以员工从属多个部门为例），用以保存部门编号列表（很明显这不符合第一范式，但很多人这样设计了，在这篇文章中我们暂不讨论在这种应用场景下，如此设计的对与错，有兴趣的...
【前端批量输入】输入框输入字符，根据非数字切割，通过逗号传给后端
指尖笑
09-15 490
功能场景： 今天做一个账号id批量输入的查询条件，以前都好傻逼限制用户只能输入某个或者某些特殊字符，然后再在代码中判断字符切割，这样很繁琐，今天换位思考，匹配非数字去切割，就可以不限制用户的输入实现同样的功能。 实现代码： const value = "467498475*erffdsfdf/778978^s789," let result= null result= value.split(/\D+/g) //连续的多个数字切割成数组 【'467498475','778978','789',''】 r
随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用
a_靖的博客
12-18 6429
先看看效果图所要实现的功能看看代码js代码讲解：下面看看完整代码吧 所要实现的功能 在页面上随机的位置显示随机大小的图片，并且每个图片不能重叠，完整实现代码。 看看代码 注：该代码是在微信小程序写的demo，因为没有使用框架的API，所以该代码的逻辑在h5或者小程序，任何地方都适用。 js代码讲解： list（初始化的数组） 和 arr（在初始化的基础上加上了随机定位的数据和随机的宽高） 是界面要遍历的数组，决定图片渲染数量，这个值也可以改成从后端获取。 最终的数据格式 max 是图片最大值，min
python之线性回归-脚本
qq_44787874的博客
06-10 1890
回归问题 下面以这个例子为例： 函数：f(特征)->特征值 f(身高)->(体重) 拟合 预测 首先我们把需要分析的数据导入放在python文件夹下 然后我们还要导入第三方工具，来实现可视化数据 pip install matplatlib 安装成功后 python 代码 import numpy as np import matplotlib.pyplot as plt data=np.loadtxt(r'hw.txt', delimiter='\t', skiprows=True)
给定有序表A[1:n] 修改合并排序算法，求出该有序表的逆序对数
qq_44787874的博客
10-08 1441
有关逆序对数的概念： 定义：对于一个给定的数列,如果有i<j,且Ai>Aj,则称(i,j)为一逆序对. 要解决的问题是,给出一个数列,求出这个数列包含多少个逆序对。 例如，数组（3，1，4，5，2）的“逆序对”有<3,1>,《3,2》，<4,2><5,2>，共4个。 开始分析算法： 首先给定了这是一个有序表，所谓有序表，是指这样的线性表，其中所有元素以递增或递减方式有序排列。 所以我们不用再进行排序了。 一般思路，就是就是遍历整个序列，判断实数与它后面的每个实
html制作表格---好看实用
qq_44787874的博客
11-17 1275
实用html加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>
css实现动画效果：transition+transform的使用
qq_44787874的博客
11-26 1247
css的具体动画效果： 4种用法： （1）2D 3D转换： 概念： translate（移动）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>beijingshezhi</title> <link href="css/new_file.css" type="text/css" rel="stylesheet" /> </he
js简单实现：点击结果按钮返回值弹出
qq_44787874的博客
11-28 946
直接看代码，即可： 适合小白 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>beijingshezhi</title> <link href="css/new_file.css" type="text/css" rel="stylesheet" /> <!-- <script src="./img/fishimgs/new
后台连接数据库
qq_44787874的博客
05-26 627
如何进行连接 在WEB-INF下，新建文件夹，命名为lib，然后下载相关的mysql驱动。 mysql-connector-java-8.0.18.jar 将下载下来的驱动放在lib文件夹下。 然后，加载驱动类 import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException;
2023前端面试必备：CSS基础知识与盒模型详解
这种技巧在响应式设计和多列布局中非常实用。 总结起来，本篇文章适合准备前端面试的开发者，重点复习CSS布局基础、盒模型、BFC及其应用，以及如何处理浮动和清除浮动问题。掌握这些知识，能够提高面试时对CSS深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值