Una

接下来的日子,陆续把未总结的问题补充起来......

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

一、总结:

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

 

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

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

第二列关键css部分:

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

posted on 2016-08-05 22:16  youyi2016  阅读(1303)  评论(0编辑  收藏  举报