3

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

4

2 回答 2

1

临时解决方案：我用浮动替换了 inline-block，并应用了这个站点的一些解决方案。但是，我将@media（最大宽度：800px）之类的东西更改为@media（最大宽度：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>
于 2013-07-12T13:17:37.567 回答
0

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

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

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

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

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

如何均匀分布许多行内块元素？

于 2013-07-12T00:18:34.437 回答