如何使用 html/css 制作智能瓷砖？答案

【问题标题】：How to make smart tiles with html/css?如何使用 html/css 制作智能瓷砖？
【发布时间】：2013-07-11 21:00:56
【问题描述】：

我正在用 div 制作图块

我做了什么：

<html>

<style>

.tile{
    display:inline-block;
    width: 30em;
    height: 30em;
    background-color: #000;
}

</style>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

<div class = tile>
</div>

</html>

这会在最右边的图块边缘之后产生未使用的空间（因为框跳到下一行）。

我想做的事：

平铺大小应取决于字体大小（检查）
每行的图块数量应取决于窗口大小（检查）
瓷砖应该从边到边完美地填满窗户（要做）

我想过这样的事情（伪代码）：

    width: calc(100% / rounded(100% /30em) );

示例：如果窗口宽度除以所需的框宽度得到 2,7：那么我希望框宽度为 100%/3。

如何使用 JavaScript 计算并设置宽度？（我之前没用过JS）。

【问题讨论】：

你能给我们一个工作的例子来说明它是如何不工作的吗？
内联块对源代码中的空白很敏感。你试过漂浮瓷砖吗？
没有。我认为这是不可能的，除了如果你使用 flexbox，我还不明白，也没有很好地实现。您的大小要么相对于字体大小 (em)，要么相对于窗口大小 (%)。但是，通过 JS，您可以管理一些事情。例如，如果字体大小介于 X 和 Y 之间，则图块为 X %。否则为 Y %。或者你可以制作一个复杂的数学公式。
奇怪，您可以在calc 中减去em 值，但除以em 值似乎不起作用...
实际上，这似乎是规范... dev.w3.org/csswg/css-values/#calc-type-checking 您只能除以数字（没有单位，这使它们成为 length 代替）。

标签： javascript css tiles

【解决方案1】：

临时解决方案：我将 inline-block 替换为 float，并应用了来自 this 站点的一些解决方案。但是，我将 @media (max-width: 800px) 之类的内容更改为 @media (max-width: 50em)。

这更好，但还不是最佳的，因为我仍然需要为大量设备添加大量@媒体。将内容（文本）拟合到图块也存在潜在问题，但我想我可以以某种方式使用 calc() 将图块内的字体大小与图块本身成比例。

工作示例（实验性 - 关键是图块大小取决于字体大小和屏幕宽度）：

<html>

<style>

body {
   margin: 0;
   padding: 0;
   color: red;
}
.tile {
   float: left;
   position: relative;
   width: 20%;
   padding-bottom: 20%;
}
.content {
   position: absolute;
   left: 0.5em;
   right: 0.5em;
   top: 0.5em;
   bottom: 0.5em;
   background-color: #000;
}

@media (max-width: 50em){
  .tile{
     width: 50%;
     padding-bottom: 50%;
  }
}

</style>

<div class=tile>
  <div class = content>
  yay
  </div>
</div>

<div class=tile>
  <div class = content>
  it
  </div>
</div>

<div class=tile>
  <div class = content>
  works!
  </div>
</div>

<div class=tile>
  <div class = content>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

<div class=tile>
  <div class = content>
  </div>
</div>

</html>

【讨论】：

我实施了这个解决方案并得出结论：我的网站的其余部分以最大 em 宽度居中。我希望带有图块的页面以相同的方式运行。这将@media 的使用限制为3-5 次，这是完全可以接受的。换句话说：案例解决了。 :)

【解决方案2】：

您可以在这些 inline-block 元素上使用 text-align: justify，如下所示：

http://codepen.io/patrickkunka/pen/GECBF

这是解释该技术的博客文章：

http://www.barrelny.com/blog/text-align-justify-and-rwd/

这里还有一个讨论它的线程：

How to evenly space many inline-block elements?

【讨论】：

不。该解决方案使用 @media () 来调整框的大小以适应不同的分辨率。因此，在 1080p 手机和 1080p 桌面屏幕上，每行的盒子数量相同。我的盒子应该取决于字体大小。