CSS - 创建 9x9 数独网格的最佳方法是什么？答案

【问题标题】：CSS - What's the best way of creating a 9x9 Sudoku grid?CSS - 创建 9x9 数独网格的最佳方法是什么？
【发布时间】：2010-11-02 21:01:47
【问题描述】：

我正在做一些项目来改进我的 HTML 和 CSS。其中之一是一个简单的数独求解器。我需要创建一个网格来放置标签或文本框。我想要一个与 question 中的网格图像完全相同的网格布局。

实现这一目标的最佳方法是什么？ CSS ...或表格？我将如何创建它？

【问题讨论】：

标签： asp.net css html

【解决方案1】：

如果是表格数据，可以使用表格。如果您想坚持使用 DIV，您可以通过为每个父立方体和子立方体设置特定的宽度/高度值并简单地向左/向右浮动它们来轻松做到这一点。如果您决定不使用显式宽度/高度值，请务必使用clear fix 来防止内容流过它们的兄弟标签。

#sudoku {
  width:297px;
  height:297px;
}
  .parentCube {
    width:99px;
    height:99px;
    float:left;
  }
    .childCube {
      width:33px;
      height:33px;
      float:left;
    }

<div id="sudoku">
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
</div>

【讨论】：

抱歉，如果您在父容器上使用显式高度，则不需要使用“清除修复”。但只是为了个人利益，明确的解决方法无非是在浮动的元素下方添加一个 DIV。新的 div 将具有 "clear:both" 以确保浮动元素不会与它们之前的任何内容重叠。
很抱歉，我需要对它进行审核。 Suduko 是一张桌子，一个 3x3 的网格。使用 CSS 模拟它只是一种痛苦。恕我直言，这是使用表格实现的简单方法。
好点。但是一般来说，“痛苦”和“轻松”不应该影响使用或不使用表格的决定，这完全取决于上下文，是的，我认为你有一个使用表格的有效案例..
“childCube”类是多余的，您可以使用 '.parentCube div' 定位该 div
@Rory 是的。但我不知道这些 cildCubes 中会包含什么。也许他们会决定使用额外的 div……我不确定。这样，我就不会匹配树下的每个 div。

【解决方案2】：

哇，乔纳森·桑普森速度很快，值得称赞！这是我的方法：

 <?xml version='1.0' encoding='UTF-8'?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
        <head>      
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
            <title>Sudoku</title>

        <style type="text/css">
          #playfield{
            width:920px;
            height:920px;
          }
          #playfield div{
            width:300px;
            height:300px;
            float:left;
            border:1px solid #ff8a00;
          }
          #playfield span{
            font-size:300%;
            width:98px;
            height:98px;
            float:left; 
            display:block;
            border:1px solid white;
            text-align:center;  
            line-height:99px;
            background-color:#f2f2f2;      
          }
          #playfield span:hover{
            background-color:#0d2f5a;
            color:white; 
          }
        </style>          
        </head>

        <body>
          <div id="playfield">
            <div>
            <span id="position_1">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            </div>
            <div>
              <span>...</span>
            </div>
          </div>
        </body>
    </html>

【讨论】：

感谢您，看到多种解决方案总是很高兴！我想我更喜欢这个，因为它更干净，但就像你说的，乔恩更快。
在我看来，当您愿意时，您应该将此答案标记为已接受。接受不一定是最快的答案。