最近在做一個產品列表頁面，布局如右圖所示。頁面中有若干個 item，其中每個 item 都向左浮動，并包含在自適應瀏覽器窗口寬度的父元素中。

效果圖

item 元素的 CSS 定義如下：

.item{

? ? ? ? float:left;

? ? ? ? margin:10px2%;

? ? ? ? width:21%;

}

這時遇到的一個需求：在保持 item 元素寬高比恒定（如高是寬的 1.618 倍）的情況下，使得 item 元素可以和父元素同比縮放。我們知道，如果當 item 元素是圖片，同時需要保持的寬高比恰好為圖片本身的寬高比時，可以設置 item 的height為auto即可輕松實現(xiàn)這個需求。然而當 item 元素不是圖片或者要保持的寬高比和圖片本身的寬高比不同時，這個需求顯得很難直接用 CSS 實現(xiàn)。

為此我放棄 CSS，直接用 JavaScript 綁定window的onresize事件來動態(tài)獲取每個 item 的寬度，從而計算并設置其高度。

我一直在使用這個解決方案，直到今天調整樣式時，突然想到這個需求竟然是可以只使用 CSS 解決的。

首先需要知道，一個元素的padding，如果值是一個百分比，那這個百分比是相對于其父元素的寬度而言的，即使對于padding-bottom和padding-top也是如此。

另外，在計算 Overflow 時，是將元素的內容區(qū)域（即width/height對應的區(qū)域）和 Padding 區(qū)域一起計算的。換句話說，即使將元素的overflow設置為hidden，“溢出”到 Padding 區(qū)域的內容也會照常顯示。

綜上兩條所述，我們可以使用padding-bottom來代替height來實現(xiàn)高度與寬度成比例的效果。因為 item 元素的寬度是其父元素寬度的 21%，所以我們將padding-bottom設置為它的 1.618 倍，即 33.98%。同時將其height設置為0以使元素的“高度”等于padding-bottom的值，從而實現(xiàn)需要的效果。

最后 item 元素的 CSS 樣式為：

.item{

? ? ? ? ?float:left;

? ? ? ? ?margin:10px5%;

? ? ? ? ?padding-bottom:33.98%;

? ? ? ? ?width:21%;height:0;

}