垂直边距与液体布局中的水平边距成比例答案

【问题标题】：vertical margins proportional to horizontal margins in liquid layout垂直边距与液体布局中的水平边距成比例
【发布时间】：2012-08-08 01:53:42
【问题描述】：

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

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

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

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

1) 如何让每个DIV浮动，让屏幕左右两边没有空隙，每个方格之间水平有2.5%的空隙？

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

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

我认为这一切都错了吗？很困惑。

任何帮助将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

我会使用网格系统，例如带有媒体查询的SUSY。

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

【讨论】：

【解决方案2】：

我最终找到的答案是使用透明的方形图像。如果将其设为 x 像素宽，则浏览器将自动调整其大小以使其高 x 像素。显然它包含的 div 也会相应地缩放:)

【讨论】：