這個效果要求是每個item元素的高度都是寬度的2倍,我們首先父元素box設置了寬度100%,這里我們主要利用padding的一個屬性來解決問題,因為padding的寬度如果是百分數來計算的的話
那么它的實際值都是相對父元素的寬度來算百分數的值,包括 padding-bottom 和 padding-top 也是如此,所以我們這里寬度可以設置為40%。由于我們這里box的寬度是100%,而高度沒有告訴,所以不能直接設置高度值來取得效果,我可利用padding-bottom來代替height值,即如上所示,把height設為0,而把padding-bottom設為80%,這樣我們就可以看到效果了,你可以隨意拖放瀏覽器窗口大小,都是等比列縮小放大的哦這個也算是自適應屏幕的一個小方法吧》。。
html代碼
代碼如下 | |
|
css代碼
代碼如下 | |
.item { width:40%; height:0; padding-bottom: 80%; background-color:#f00; float:left; margin:10px 5px;; } |
新聞熱點
疑難解答