CSS3使用多列制作瀑布流

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3多列布局,css3多列平分宽度,css3多列,css3瀑布流,css3实现瀑布流等相关知识,佚名希望在学习及工作中可以帮助到您

先来来看一看CSS3如何实现多列显示，代码如下

</div>

<div class="div1">
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
大家好，这里是用来站位的文字大家好，这里是用来站位的文字
</div>
.div1{
/*分列的数量*/
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;
}

</div> </div>

效果图：

CSS3使用多列制作瀑布流：

</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="countstyle.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div><img src="img/1.png">
<p>这里是产品描述</p></div>
<div><img src="img/2.png"></div>
<div><img src="img/3.png"></div>
<div><img src="img/4.png">

您可能想查找下面的文章:

相关文章

2017-06-02CSS3实现超慢速移动动画效果非常流畅无卡顿
2017-06-02一款简洁的纯css3代码实现的动画导航
2017-06-02CSS3实现多背景展示效果通过CSS3定位多张背景
2017-06-02CSS3的column-fill属性对齐列内容高度的用法详解
2017-06-02纯CSS实现设置半个字符的样式
2017-06-02利用CSS3实现平移动画效果示例代码
2017-06-02可以随进度显示不同颜色的css3进度条分享
2017-06-02前端制作动画的几种方式（css3，js）
2017-06-02使用CSS3 制作一个material-design 风格登录界面实例
2017-06-02css 省略号 css3让多余的字符串消失并附加省略号的实现代码