CSS3使用多列制作瀑布流

<div><imgsrc="img/6.png"></div>

<div><imgsrc="img/7.png">

<p>这里是产品描述</p></div>

<div><imgsrc="img/8.png"></div>

<div><imgsrc="img/9.png"></div>

<div><imgsrc="img/1.png"></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>

<div><imgsrc="img/6.png"></div>

<div><imgsrc="img/7.png"></div>

<div><imgsrc="img/8.png"></div>

<div><imgsrc="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;

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!