不规律照片 瀑布流基本原理的剖析运用

日期:2020-11-02 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

在新项目中遇到了不规律照片墙的合理布局难题 剖析基本原理以下:

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>


上一篇:favico.ico 返回下一篇:没有了