2012-01-03 66 views
0

這將很難解釋,但希望有一位CSS忍者或兩位可以幫助我的人。基本上,我想創建一個方形DIV網格(想象Windows 7手機metro接口),它使用百分比拉伸以適應屏幕,並且在方格之間水平和垂直方向具有相等的間距。縱向邊距與液體佈局中的水平邊距成正比

這聽起來很容易,但我真的不能解決它。

讓我舉個例子。如果屏幕寬度爲1000px,並且水平方向有5個方塊,那麼我可以製作每個寬度大約18%(每個180px,總計90%),剩下10%的空隙但是...

1)如何浮動每個DIV,以便屏幕的左側或右側沒有間隙,但每個方塊之間水平間隙爲2.5%?

2)如何創建一個比例垂直間隙來匹配屏幕調整大小時方塊之間的水平間距?

3)如何確保每個DIV保持一個正方形,因此高度正比於寬度,寬度是容器寬度的百分比。

我在想這個全錯嗎?很困惑。

任何幫助真的不勝感激。

回答

0

我最終發現的答案是使用透明方形圖像。如果您將其設置爲x像素寬度,則瀏覽器會自動調整其大小以使其x像素高。顯然它包含div也將相應地縮放:)

0

我會使用網格系統,類似SUSY與媒體查詢。

基本上你想要一個負責任的電網,這裏有一些例子:

  • 金網格系統
  • 1140px
  • LESS
  • Columnal
  • inuitCSS
  • 與Susy
  • 語義