当前位置：主页 > 查看内容

不规则图片 瀑布流原理的分析应用

发布时间：2021-04-30 00:00| 有 位朋友查看

简介：在项目中遇到了不规则图片墙的布局问题 分析原理如下： 1.img display: block; 解决3px img标签bug 2.img 设置height 和width 不然会出现 下面的图片如果先加载上面的图片再加载时 会推动图片向下移动 3.父div position: relative; 让图片价格可以相对绝对定……

在项目中遇到了不规则图片墙的布局问题 分析原理如下：

1.img display: block; 解决3px img标签bug

2.img 设置height 和width 不然会出现 下面的图片如果先加载上面的图片再加载时 会推动图片向下移动

3.父div position: relative; 让图片价格可以相对绝对定位

4.子span position: absolute; right: 5px; bottom: 5px; 让价格绝对父div定位

5.为了实现效果 把图片div放到3列大div里

效果如下:

复制代码
代码如下:

<div id=”main”></p> <p>　　<div class=”g1”></p> <p>　　　　<div class=”item”></p> <p>　　　　　　<img src=”” width=”” height=””/></p> <p>　　　　　　<span>价格</span></p> <p>　　　　</div></p> <p>　　　　.....</p> <p>　　</div></p> <p>　　<div class=”g2”></p> <p>　　</div></p> <p>　　<div class=”g3”></p> <p>　　</div></p> <p></div>



原文链接：https://m.jb51.net/web/80461.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：10个非常不错的CSS技巧收集整理分享 下一篇：去除在FireFox中点击链接时,出现虚线边框的解决办法

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐