css - html 使 高度与宽度成正比

Question

我想生成一个具有相对大小的表格。例如，我想要一个包含 14 列和 1 行的空表。行高应为一个单元格宽度的 0.75。在这种情况下，如果有 14 列，一个单元格的宽度约为 7%。

我使用空表的目的是:我使用的是html5提供的拖放功能。我想将一些东西拖放到空表的不同单元格中。

目前，我找到了使用 padding 在它为空时具有所需高度的方法。然而，填充的问题是一旦你将一些东西拖到空单元格中，它仍然会有空的填充区域。

有人建议我该怎么做吗？

非常感谢!

Answer 1

如果您可以在您的单元格中放置一个 DIV，您可以使用以下 CSS 来确保每个单元格的高度为其宽度的 75%:

td {
  position: relative;
}

td > div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

td:before {
  content: "";
  display: block;
  padding-top: 75%;
}

这是基于这样一个事实，即填充始终是元素宽度而非高度的函数。

Fiddle