如何用HTML/CSS制作智能瓷砖？

Question

如何用HTML/CSS制作智能瓷砖？

3

I am making tiles with divs

What I have done:

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

Translated:

Example: 如果窗口宽度除以所需盒子宽度得到2.7: 那么我希望盒子宽度为100%/3.

如何用 JavaScript 计算并设置这个宽度? (我之前没用过 JS).

- user2574264

你能给我们一个工作不正常的示例吗？ - Zach Latta

2

内联块对源代码中的空格非常敏感。你尝试过将瓷砖浮动吗？ - bfavaretto

1

奇怪的是，在calc中可以减去em值，但除以一个em值似乎不起作用... - bfavaretto

1

实际上，这似乎是按规范来的... http://dev.w3.org/csswg/css-values/#calc-type-checking 您只能通过数字进行除法（没有单位，这使它们成为长度）。 - bfavaretto

@bfavaretto 有什么办法可以绕过它吗？需要几行 JS 代码吗？ - user2574264

显示剩余4条评论

2个回答

0

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

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

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

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

这里有一个讨论此问题的线程：

如何均匀地排列多个inline-block元素？

- ralph.m

不行。那个解决方案使用@media()来调整不同分辨率下盒子的大小，因此在1080p手机和1080p桌面屏幕上每行的盒子数量相同。我的盒子应该根据字体大小而定。 - user2574264

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2574264 · Accepted Answer

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

这样做效果更好，但还不是最佳解决方案，因为我仍然需要为大量设备添加很多@ 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>