DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 不規則圖片 瀑布流原理的分析應用
不規則圖片 瀑布流原理的分析應用
編輯:前端技巧     

在項目中遇到了不規則圖片牆的布局問題 分析原理如下:

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>


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved