如何用html / css制作智能瓷砖？
[英]How to make smart tiles with html/css?
问题描述
I am making tiles with divs 
我正在用div制作瓷砖
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>
This causes unused space after the edge of the rightmost tiles (as the boxes jumps to the next line). 这会导致最右边的图块边缘之后的未使用空间（当框跳转到下一行时）。
What I want to do: 我想做的事：
- The tile size should depend on font size (check) 磁贴大小应取决于字体大小（检查）
- The number of tiles per row should depend on window size (check) 每行的平铺数量应取决于窗口大小（检查）
- The tiles should fill the window perfectly, from edge to edge (to do) 瓷砖应该完美地填充窗口，从边缘到边缘（要做）
I thought about something like this (pseudocode): 我想过这样的事情（伪代码）：
width: calc(100% / rounded(100% /30em) );
Example: If the window-width divided with desired box-width gives 2,7: Then I want the box-width to be 100%/3. 示例：如果窗口宽度除以所需的框宽度给出2,7：那么我希望框宽度为100％/ 3。
How can I calculate this with JavaScript and set the width? 如何用JavaScript计算并设置宽度？ (I have never used JS before). （我之前从未使用过JS）。
2 个解决方案
解决方案1
1 2013-07-12 13:17:37
Temporary solution: I replaced the inline-block with float, and applied some of the solution from this site. 临时解决方案：我用float替换了内联块，并从该站点应用了一些解决方案。 However, I changed stuff like @media (max-width: 800px) to @media (max-width: 50em). 但是，我将@media（max-width：800px）之类的内容更改为@media（max-width：50em）。
This is better but not yet optimal, because I still have to add a lot of @ media for a large range of devices. 这是更好但不是最优的，因为我仍然需要为大量设备添加大量@媒体。 There is also a potential problem with fitting content(text) to the tiles, but I guess I can somehow use calc() to proportion the font-size inside the tiles to the tiles itself. 将内容（文本）拟合到图块也存在潜在问题，但我想我可以某种方式使用calc（）将图块内的字体大小与图块本身进行比例。
Working example (experimental - the point is that the tile size depends on both font-size and screen-width): 工作示例（实验 - 重点是图块大小取决于字体大小和屏幕宽度）：
<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>
解决方案2
0 2013-07-12 00:18:34
You can use text-align: justify on those inline-block elements, as demonstrated here: 您可以对这些inline-block元素使用text-align: justify ，如下所示：
http://codepen.io/patrickkunka/pen/GECBF http://codepen.io/patrickkunka/pen/GECBF
Here is a blog posts that explains the technique: 这是一篇解释该技术的博客文章：
http://www.barrelny.com/blog/text-align-justify-and-rwd/ http://www.barrelny.com/blog/text-align-justify-and-rwd/
and here a thread that also discusses it: 这里还有一个讨论它的线程：
How to evenly space many inline-block elements? 如何均匀分隔许多内联块元素？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.