css3-使用多列制作瀑布流
2016-01-07 20:26
447 查看
<!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; }
相关文章推荐
- css3-多列
- CSS3 实现导航菜单的 3D 翻转动画效果
- 响应式web设计(css)
- CSS Selector(berserkjs用到)
- CSS基础之颜色值和长度值设置
- CSS之代码简写
- css float浮动
- QGraphicsSceneBspTree出现的崩溃问题
- css 选择器
- CSS基础之布局模型
- CSS基础之盒子模型
- ie6,ie7,ie8 css bug汇总以及兼容解决方法 - xhuangtao
- CSS Flex-box示例代码
- css3-动画
- CSS3的calc()使用
- CSS 双排文字
- CSS设置html网页背景图片 CSS设置网页背景颜色
- 使用CSS3制作响应式网页背景图像
- CSS背景全攻略
- HTML中通过CSS设置背景图片自适应浏览器大小