僅適用於CSS方格，3線，響應高度，可變方塊數

我一直在爲此工作超過10個小時，搜索網絡尋求解決方案，但無濟於事。僅適用於CSS方格，3線，響應高度，可變方塊數

這裏是草圖的截屏：

我需要有以下要求生產網格佈局：

整個事情是在一個水平滾動佈局。
響應身高，相對於它的容器（它已經響應相對身體，使用拉伸到邊緣技術）。高度相等（33.333％）
的
3線組成方形圖像錨
- 對小鼠過來：顏色疊加白字
方形圖像需要保持自己的比例（減少該窗口的高度，圖像寬度必須按比例縮小。
整個佈局的寬度必須是動態的，因爲正方形的數量可以變化。

我見過大量的例子，其中寬度已定義，並使用填充頂部值來定義高度。由於高度是定義值，因此在這裏不起作用。

明天我會再次發佈更新。

我有點絕望。想喝酒（開玩笑）。

來源

2014-03-26 CharlesKaki

請發佈您試過的HTML和CSS – Popnoodles

這可能會讓你開始 - http://jsfiddle.net/y3XnM/ – TimSPQR

我一直在想這個問題。今天早上，我潛入jsfiddle並製作了這個http://jsfiddle.net/CharlesKaki/wp3Va/9/它以某種方式與Safari一起工作，它在Firefox中運行正常，不知道IE。令我驚訝的是，當改變窗口的高度時，寬度不會實時更新。你需要刷新。加載時，寬度是成比例的。 – CharlesKaki

該問題已答覆！

我終於使用了「vh」單位，並將其應用於所有方塊的高度和寬度。

是這樣的：

.c-squares{ 
    width:30vh; 
    height:30vh; 
    display:inline; 
}

那麼幹淨，不能相信，我從來不知道「VH」單元。

來源

2014-04-23 23:38:17 CharlesKaki

僅適用於CSS方格，3線，響應高度，可變方塊數

回答

相關問題