Question

我用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。）

Answer 1

临时解决方案：我用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>

Answer 2

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

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

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

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

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

How to evenly space many inline-block elements?

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

2 个答案: