码迷,mamicode.com
首页 > 其他好文 > 详细

瀑布流布局

时间:2016-08-05 23:06:17      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

一、总结:

首先是分清楚设计稿的结构,下面瀑布流布局首先是将容器分出三个有固定宽度的div,第一列多张图片的横向排列采用inline-block布局的方式,但是三列的横向显示只采用inline-block的布局方式,这里不是很尽如人意。后面两列还结合了position的方式定位才达到理想的效果。刚开始我错误的给第二列采用了position:relative的方式来定位,出现了如下错误:

 

技术分享

技术分享

技术分享

 给第二列采用了relative的定位方式,导致整个瀑布流布局的高度变成了三列高度的和2320px,页面下面留下大片空白。

因为relative布局是不脱离文档流的,尽管我已经把第二列第三列的移了上去,但是它们原来占的位置还是存在。为了把后面两列完全移到第一列的后面,还是必须给元素设置inline-block。同时给父容器设置absolute定位,这样给第二列设置absolute定位的时候,第二列就可以立马相对父容器定位了。

第二列关键css部分:

技术分享

在我的页面中第三列采用relative定位就可以了:

技术分享

瀑布流布局

标签:

原文地址:http://www.cnblogs.com/yy95/p/5741138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!