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

How to make smart tiles with html/css?

本文关键字：智能 css 何使用 html      更新时间：2023-09-26

我正在用divs 制作瓷砖

我所做的：

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

临时解决方案：我用float替换了内联块，并应用了该站点的一些解决方案。然而，我把@media（最大宽度：800px）改成了@media。

这是更好的，但还不是最佳的，因为我仍然需要为各种设备添加大量@media。将内容（文本）适配到分块中也存在潜在的问题，但我想我可以使用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>

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

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

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

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

这里有一个线程也在讨论它：

如何均匀地分配多个内联块元素？

相关文章：