html - 液体布局中垂直边距与水平边距成比例

Question

这将很难解释，但希望有一两个 CSS 专家可以帮助我。

基本上，我想创建一个正方形 DIV 网格(想象一下 Windows 7 手机的 Metro 界面)，它使用百分比拉伸(stretch)以适合屏幕，并且正方形之间的水平和垂直间距相等。

这听起来很简单，但我真的做不出来。

我举个例子。如果屏幕是 1000px 宽并且水平有 5 个正方形，那么我可以让每个正方形大约 18% 宽(每个 180px，总共 90%)，为它们之间的间隙留出 10% 但是......

1)如何 float 每个DIV，使得屏幕左右两侧没有间隙，每个方 block 之间水平有2.5%的间隙？

2) 如何在调整屏幕大小时创建一个成比例的垂直间隙以匹配正方形之间的水平间隙？

3) 如何确保每个 DIV 保持正方形，以便高度与宽度成正比，宽度是其容器宽度的百分比。

我是不是想错了？很困惑。

我们将不胜感激任何帮助。

Answer 1

我会使用网格系统，比如 SUSY与媒体查询。

基本上你想要一个响应式网格，这里有一些例子:

• 金色网格系统
• 1140px
• 少
• 专栏
• 因纽特CSS
• 苏西
• 语义