html - 防止表格尺寸失真

Question

我创建了一个像素艺术制作器，允许用户选择他或她喜欢的网格大小。我添加了以下 CSS 以将其转换为两列布局(连同我的 HTML 中的 div)，以便在网格左侧显示面板:

.column {
  float: left;
  width: 35%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

您可以查看我的CodePen以供引用。

但是，默认的 25 x 25 网格高度大于宽度。我尝试摆弄 width: 35%; 但每个结果都被扭曲了。我怎样才能使它成为一个完美的正方形？

Answer 1

因为你的表父类有width:35%这意味着 table将采取100%如果表格内容超出父级宽度，这将覆盖 td宽度，但如果表格内容不超过 td宽度将起作用。

所以你需要使用min-width: 20px与 box-sizing: border-box;而不是 width在td .

您可以找到更多信息 here

td {
  min-width: 20px;
  box-sizing: border-box;
}

Updated Codepen