Question

我正在尝试创建一个包含在960x960像素容器中的64x64网格。不幸的是，我不确定如何实现这一目标。我尝试以百分比为基础，但随后我的细胞完全消失了。谁能给我任何见解？

.square 
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    height: 1.67%;  // I have no idea what I'm doing here
    max-height: 6.25%;
    width: 1.67%;
    max-width: 6.25%;

    background-color: white;
}

#container
{
    width: 960px;
    height: 960px;

    display: inline-block;
}

Answer 1

根据您正在寻找的具体内容，有几种方法可以做到这一点，但这里有一个解决方案：Fiddle

#container {
    width: 100%;
    height: 100%;
    max-height: 480px;
    max-width: 480px;
    background: red;
}

.square {
    height: 100%;
    width: 100%;
    max-width: 64px;
    max-height: 64px;
    display: inline-block;
    /* or use float: left; */
    background: yellow;
}

这是一个完全响应的版本：Fiddle2

#container {
    width: 100%;
    height: 100%;
    max-height: 480px;
    max-width: 480px;
    background: red;
}

.square {
    padding-bottom: 19%;
    width: 19%;
    display: inline-block;
    /* or use float: left; */
    background: yellow;
}

Answer 2

问题是在原始代码中.square的大小是错误的。如果每行或每列都衡量960px，并且您希望拥有64 x 64网格，则每个单元格应衡量总数的1 / 64，即960px / 64 = 15px。在%中，它将是100% / 64 = 1.5625%。

这样，无论#container的大小如何，你都将拥有64x64网格，尽管64的倍数将是最佳选择，因为所有单元格都具有相同的大小。

＆＃13;

const cells = [];

for (let i = 0; i < 4096; ++i) {
  cells.push('<div class="square"></div>');
}

document.getElementById('container').innerHTML = cells.join('');

＆＃13;

body {
  margin: 0;
  background: #000;
}

#container {
  position:relative;
  width: 100vmin;
  height: 100vmin;
  background: #FFF;
  margin: 0 auto;
  cursor: none;
}
.square {
  position:relative;
  box-sizing: border-box;
  width: 1.5625%;
  height: 1.5625%;
  float: left;
}

.square:hover {
  background: #F00;
  z-index: 1;
  box-shadow: 0 0 32px 8px #F00;
}

＆＃13;

<div id="container"></div>

＆＃13;

或者，您可以考虑使用CSS Grid。

使用可变数量的单元格创建固定大小的网格

2 个答案: