CSS3使用多列制作瀑布流

所属分类：网页制作 / CSS 阅读数： 1230

收藏 0赞 0分享

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

CSS Code复制内容到剪贴板

<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;
}

效果图：

CSS3使用多列制作瀑布流：

XML/HTML Code复制内容到剪贴板

<!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">
<p>这里是产品描述</p></div>
<div><img src="img/5.png"></div>
<div><img src="img/6.png"></div>
<div><img src="img/7.png">
<p>这里是产品描述</p></div>
<div><img src="img/8.png"></div>
<div><img src="img/9.png"></div>
<div><img src="img/1.png"></div>
<div><img src="img/2.png"></div>
<div><img src="img/3.png"></div>
<div><img src="img/4.png">
<p>这里是产品描述</p></div>
<div><img src="img/5.png"></div>
<div><img src="img/6.png"></div>
<div><img src="img/7.png"></div>
<div><img src="img/8.png"></div>
<div><img src="img/9.png"></div>
</div>
</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.div{
width: 250px;
margin:5px;
}
.container p{
text-align: center;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

更多精彩内容其他人还在看

css实现的让图片垂直居中的方法

图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。

收藏 0赞 0分享

3个比较有用的网页制作技巧

我们在进行DivCSS布局的时候，非常关注CSS技巧的学习，今天向大家推荐3个所谓的 “顶级”CSS技巧！虽然没有什么新意，但对新手而言却非常重要！

收藏 0赞 0分享

让你写出更轻巧、更快并且更不会让你头疼的CSS的方法

为什么我们的CSS变得一团糟——我们真的很容易陷入这样的困惑中。有时这是一开始就马虎编程的结果，有时是由于后期多重的附加代码（hacks)和修改造成的。

收藏 0赞 0分享

利用CSS3的checked伪类实现OL的隐藏显示的方法

随着CSS3的发布，国外研究正如火如荼，但在国内还有很多人抱着IE不支持CSS3的想法，始终无动于衷不肯去学习。

收藏 0赞 0分享

CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。

收藏 0赞 0分享

固定位置显示弹出层(兼容IE6,IE8,FF)

兼容IE6,IE8,FF弹出层固定位置显示,主要是通过css的控制

收藏 0赞 0分享

div完美自适应动态上下左右居中

div完美自适应动态上下左右居中，多用于信息提示框效果。

收藏 0赞 0分享

display:inline的用法

和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了

收藏 0赞 0分享

css样式实现整个页面背景使用一张图片

最近一直被css背景困扰，因为是仿站，别人网站背景图片无论怎样另存，都是相同文件名，打开一看，整个网站的各个角落背景图片都在一个文件中分布，于是上网搜集资料，发现使用这种方法的网站很多，源自于雅虎最早。

收藏 0赞 0分享

关于CSS样式表文件组织形式的整理

以下引用网络上的一篇文章,不知道作者是谁了,总体上概括的不错,但是在实际应用当中还是要根据项目情况来具体实施比较好。

收藏 0赞 0分享

CSS3使用多列制作瀑布流

css实现的让图片垂直居中的方法

3个比较有用的网页制作技巧

让你写出更轻巧、更快并且更不会让你头疼的CSS的方法

利用CSS3的checked伪类实现OL的隐藏显示的方法

CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

固定位置显示弹出层(兼容IE6,IE8,FF)

div完美自适应动态上下左右居中

display:inline的用法

css样式实现整个页面背景使用一张图片

关于CSS样式表文件组织形式的整理

网络赚钱

站长故事