在項目中遇到了不規則圖片牆的布局問題 分析原理如下:
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>