老师好:为什么只使用float得不到瀑布流这样的效果

老师好:为什么只使用float得不到瀑布流这样的效果

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好同学 ,因为图片的高度并不一致 ,有高有矮 ,如下:

http://img1.sycdn.imooc.com//climg/5c319c02000192df10750449.jpg

如果单独使用浮动的话 ,因为浮动元素参照上一个浮动元素的去浮动 。例如图书中 ,第七个盒子参照第六个盒子去浮动 ,由于第六个盒子高度小于第四个盒子 ,导致第七个盒子在参照它浮动的时候被挡住了 ,浮动不过去了 ,所以并不能实现从左到右一次排列的结果 。

所以视频中的原理就是要把上一行中 ,每个盒子的高度放在一个数组中 ,然后计算出最小的一个高度 ,并把第七个盒子使用定位把它放在最小盒子的下面 ,然后在从剩下的盒子里面找出最小高度 ,把第八个盒子放在其下面 . 以此类推...

这里的案例稍微要难理解一点 ,建议同学多看几遍视频 ,然后跟着也多练习一下 。以巩固知识并帮助自己理解 。

祝学习愉快 ,望采纳 。

  • 精慕门9328699 提问者 #1
    如图中 只要第四个的盒子比第六个盒子高,第七个盒子就只能在第五个盒子下面吗(哪怕前面的盒子比第五个还要矮) 这样理解对吗
    2019-01-06 14:31:43
  • 好帮手慕夭夭 回复 提问者 精慕门9328699 #2
    可以这样理解 . 第七个盒子在向左浮动的时候 , 只要遇到比第六个盒子高的 ,就会被挡住浮动不过去了 .
    2019-01-07 09:49:01
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师