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

标签 html css

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

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

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

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

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

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

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

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

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

最佳答案

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

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

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

关于html - 液体布局中垂直边距与水平边距成比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8720333/

相关文章:

jquery - Html 表格单元格编辑文本框不关注输入模糊事件不起作用

javascript - Bootstrap 移动导航栏无法正确折叠

css - 如何使用 Angular Material 确保边距相等? (md-grid-list md-grid-tile md-rowspan)

html - 使用 CSS 的卷页效果

Javascript 设置超时();对于 ProgressBar 不起作用

javascript - 具有不同 URL 端点的主干集保存 (PUT) 请求

javascript - 添加 (@host) 监听器以进行全屏更改

html - 使用 HTML 表单部分显示图像文件的简单方法

javascript - 如何使元素在 selenium webdriver 中可见?

html - 使用 div 使表格拉伸(stretch)