css3浮动教程(CSS3使用多列制作瀑布流)
类别:Web前端 浏览量:1872
时间:2022-01-25 00:11:54 css3浮动教程
CSS3使用多列制作瀑布流先来来看一看CSS3如何实现多列显示,代码如下
- <li class="li1">
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字
- </li>
- .li1{
- /*分列的数量*/
- column-count: 4;
- -moz-column-count:4;
- /*每一个分列中间的距离*/
- -moz-column-gap: 70px;
- column-gap: 70px;
- /*每两个列之间的线和线的颜色*/
- column-rule: 5px outset #FF0000;
- -moz-column-rule: 5px outset #FF0000;
- }
效果图:
CSS3使用多列制作瀑布流:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <link href="countstyle.css" type="text/css" rel="stylesheet">
- </head>
- <body>
- <li class="container">
- <!--尽量在做图片的时候使其宽度相等-->
- <li><img src="img/1.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />>
- <p>这里是产品描述</p></li>
- <li><img src="img/2.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/3.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/4.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />>
- <p>这里是产品描述</p></li>
- <li><img src="img/5.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/6.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/7.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />>
- <p>这里是产品描述</p></li>
- <li><img src="img/8.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/9.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/1.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/2.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/3.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/4.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />>
- <p>这里是产品描述</p></li>
- <li><img src="img/5.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/6.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/7.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/8.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- <li><img src="img/9.jpg" alt="css3浮动教程(CSS3使用多列制作瀑布流)" border="0" />></li>
- </li>
- </body>
- </html>
- .container{
- /*需要适配浏览器,这里因为只用了火狐浏览器,就不再写其他的适配代码了*/
- column-width: 300px;/* 给图片区域设定宽度,高度自适应 */
- -moz-column-width: 300px;
- -moz-column-gap: 5px;
- column-gap: 5px;
- /*column-count: 4;*/
- /*-moz-column-count: 4;*/
- }
- .container.li{
- width: 250px;
- margin:5px;
- }
- .container p{
- text-align: center;
- }
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- css弹性布局设置每行显示指定个数(CSS实现多行多列的布局的实例代码)
- sql语言怎么删除某列(SQL删除多列语句的写法)
- SQL Server多列索引
- sql两列合并成一列格式(SQL 将一列拆分成多列的三种方法)
- python在dataframe添加数据(使用Python向DataFrame中指定位置添加一列或多列的方法)
- css3浮动教程(CSS3使用多列制作瀑布流)
- sql 多列求和 当某列有null值时的处理
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
热门推荐
- docker 运行容器命令详细参数详解(Docker Hub运行原理及实现过程解析)
- python列表和条件组合的处理(一篇文章带你弄懂Python基础之列表相关操作和嵌套)
- apache服务配置详解(APACHE 多站点配置方法)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- python装饰器初学者教程(Python3.5装饰器原理及应用实例详解)
- SQL Server中row_number的用法
- laravel8 前后端分离方案(laravel 根据不同组织加载不同视图的实现)
- windows server下的iis配置小结(Windows中IIS内FTP服务器高级配置图文教程)
- phpsession如何用(如何解决PHP获取不到SESSION信息之一般情况)
- 云服务存储空间不足(云服务器内存资源不足解决方案)