CSS3使用多列制作瀑布流
|
先来来看一看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> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> <linkhref="countstyle.css"type="text/css"rel="stylesheet"> </head> <body> <divclass="container"> <!--尽量在做图片的时候使其宽度相等--> <div><imgsrc="img/1.png"> <p>这里是产品描述</p></div> <div><imgsrc="img/2.png"></div> <div><imgsrc="img/3.png"></div> <div><imgsrc="img/4.png"> <p>这里是产品描述</p></div> <div><imgsrc="img/5.png"></div> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
