我创建了一个数独拼图创建器/求解器,需要一些 CSS 帮助来设置它的样式。
通常它们的样式如下:
我正在使用的一些命名。
单元格- 每个单独的单元格都包含一个数字。
盒子- 9 个盒子之一,每个盒子包含 3 x 3 个单元格
网格- 整个 9x9 游戏区域。
我的 html 部分由我的 ruby / Sinatra 应用程序生成(至少重复的 DIV 是)并且结构如下:
#game {
margin-left: auto;
margin-right: auto;
width: 360px;
}
.cell input {
display: inline-block;
float: left;
width: 40px;
height: 40px;
border-style: solid;
border-width: 1px;
text-align: center;
font-size: 15px;
}
<form action="/" method="post">
<div id="game">
<div class="cell">
<input name="cell[0]" type="text" maxlength="1" value=<%=val%>>
</div>
<div class="cell">
<input name="cell[1]" type="text" maxlength="1" value=<%=val%>>
</div>
<!-- ... -->
<div class="cell">
<input name="cell[79]" type="text" maxlength="1" value=<%=val%>>
</div>
<div class="cell">
<input name="cell[80]" type="text" maxlength="1" value=<%=val%>>
</div>
</div>
</form>
这允许我创建基本的 9x9 网格,我的第一个单元格 (0) 在左上角,然后从左向右移动,一次一行,到右下角的最后一个单元格 (80)。
困难在于设置每个单元格的样式,以便网格不仅可以拆分为行和列,还可以拆分为 9 个更大的框。再次查看此网格以供参考。
目前我有几个选择:
完全重写我的数独代码,以便我以不同的顺序绘制 DIV。将每个框包装在分组 DIV 中。这将使 CSS 相对简单。这将是一个重大变化,我真的不想走这条路。
手动标识每个单元格并为所有 81 个单元格编写相应的 CSS。比上面好,但仍然是球痛,不是特别光滑。
我确实可以选择动态生成 CSS 样式(性能不是问题)。我正在寻找的是设计一种算法的帮助,该算法将确定(基于它的线性索引 0..80)每个单元格的样式。
例如,顶行 (0..8) 中的所有单元格将具有粗的上边框 (3px) 和细的下边框 (1px)。第 3 行 (18..26) 中所有单元格的底部将有一个粗边框,但这些单元格的顶部将有一个细边框。第一列中所有单元格的左侧将有一个粗边框,但这些单元格的右侧将有一个细边框。等等。