Question

我已经创建了一个数独谜题创建者/解算器，并需要一些CSS的帮助来设计它。

通常它们的样式如下：

http://www.sudoku.4thewww.com/Grids/grid.jpg

我正在使用的一些命名。

单元格 - 每个单独的单元格包含一个数字。

Box - 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个较大的框。再次参阅this grid以供参考。

目前我有几个选择：

完全重写我的数独代码，以便我以不同的顺序绘制DIV。在分组DIV中包装每个框。这将使CSS相对简单。这将是一个重大变化，我真的不想走这条路。
手动识别每个单元格并为所有81个单元格编写相应的CSS。比上面好，但仍然是一个球疼，而不是特别光滑。

我可以选择动态生成CSS样式（性能不是问题）。我正在寻找的是设计一种算法的一些帮助，该算法将确定（基于它的线性索引0..80）每个单元格应该如何设置样式。

例如，顶行（0..8）中的所有单元格都有一个厚顶边框（3px）和一个薄底边框（1px）。第3行（18..26）中所有单元格的底部将具有粗边框，但这些单元格的顶部将具有薄边框。第一列中所有单元格的左侧将具有粗边框，但这些单元格的右侧将具有薄边框。等等。

Answer 1

以下是对HTML5 CR中table element部分中的示例的略微修改，说明了使用colgroup对列进行分组，使用tbody对行进行分组。通过此分组，您可以在组周围设置不同的边框，而不是在单元格周围设置。

<style>
table { border-collapse: collapse; font-family: Calibri, sans-serif; }
colgroup, tbody { border: solid medium; }
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<table>
  <caption>Sudoku of the day</caption>
  <colgroup><col><col><col></colgroup>
  <colgroup><col><col><col></colgroup>
  <colgroup><col><col><col></colgroup>
  <tbody>
   <tr> <td>1 <td>  <td>3 <td>6 <td>  <td>4 <td>7 <td>  <td>9
   <tr> <td>  <td>2 <td>  <td>  <td>9 <td>  <td>  <td>1 <td>
   <tr> <td>7 <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>6
  <tbody>
   <tr> <td>2 <td>  <td>4 <td>  <td>3 <td>  <td>9 <td>  <td>8
   <tr> <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>
   <tr> <td>5 <td>  <td>  <td>9 <td>  <td>7 <td>  <td>  <td>1
  <tbody>
   <tr> <td>6 <td>  <td>  <td>  <td>5 <td>  <td>  <td>  <td>2
   <tr> <td>  <td>  <td>  <td>  <td>7 <td>  <td>  <td>  <td>
   <tr> <td>9 <td>  <td>  <td>8 <td>  <td>2 <td>  <td>  <td>5
</table>

Answer 2

通过将Jukka K. Korpela's answer 与Mike's answer相结合并添加一些jQuery魔法，我创建了两个解决方案。

＆＃13;

$(document).ready(function () {
    var data = [
        1, 0, 3, 6, 0, 4, 7, 0, 9, // 0x0
        0, 2, 0, 0, 9, 0, 0, 1, 0, // 0x1
        7, 0, 0, 0, 0, 0, 0, 0, 6, // 0x2
        2, 0, 4, 0, 3, 0, 9, 0, 8, // 1x0
        0, 0, 0, 0, 0, 0, 0, 0, 0, // 1x1
        5, 0, 0, 9, 0, 7, 0, 0, 1, // 1x2
        6, 0, 0, 0, 5, 0, 0, 0, 2, // 2x0
        0, 0, 0, 0, 7, 0, 0, 0, 0, // 2x1
        9, 0, 0, 8, 0, 2, 0, 0, 5  // 2x2
    ];

    // Build page content.
    $('body').append($('<div>').addClass('wrapper')
        .append($('<div>').addClass('col')
          .append($('<h1>').html('First Method'))
          .append(generateSudokuGrid()))
        .append($('<div>').addClass('col')
          .append($('<h1>').html('Second Method'))
          .append(generateSudokuGrid2())));

    // Populate grids with data.
    $('table[class^="sudoku"]').each(function (index, grid) {
        populateGrid($(grid), data);
    });
});

function populateGrid(grid, data) {
    grid.find('td').each(function (index, td) {
        $(td).text(data[index] || '');
    });
}

/* First Method */
function generateSudokuGrid(data) {
    return $('<table>').append(multiPush(3, function () {
        return $('<colgroup>').append(multiPush(3, function () {
            return $('<col>');
        }));
    })).append(multiPush(3, function () {
        return $('<tbody>').append(multiPush(3, function () {
            return $('<tr>').append(multiPush(9, function () {
                return $('<td>');
            }));
        }));
    })).addClass('sudoku');
}

/* Second Method */
function generateSudokuGrid2(data) {
    return $('<table>').append(multiPush(9, function () {
        return $('<tr>').append(multiPush(9, function () {
            return $('<td>');
        }));
    })).addClass('sudoku2');
}

function multiPush(count, func, scope) {
    var arr = [];
    for (var i = 0; i < count; i++) {
        arr.push(func.call(scope, i));
    }
    return arr;
}

＆＃13;

/* First Method */
table.sudoku {
    border-collapse: collapse;
    font-family: Calibri, sans-serif;
}
.sudoku colgroup, tbody {
    border: solid medium;
}
.sudoku td {
    border: solid thin;
    height: 1.4em;
    width: 1.4em;
    text-align: center;
    padding: 0;
}

/* Second Method */
table.sudoku2 {
    border-collapse: collapse;
    font-family: Calibri, sans-serif;
}
.sudoku2 tr:nth-of-type(3n) {
    border-bottom: solid medium;
}
.sudoku2 td:nth-of-type(3n) {
    border-right: solid medium;
}
.sudoku2 td {
    border: solid thin;
    height: 1.4em;
    width: 1.4em;
    text-align: center;
    padding: 0;
}

/* Presentation Formatting [Ignore] */
table[class^="sudoku"] {
  margin: 0 auto;
}
.wrapper {
  width: 100%;
}
.col {
  display: inline-block;
  width: 50%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 3

我会创建数独板，如下所示：

<section class="sudoku">
       <div class="sudoku-row">
           <div class="sudoku-square">
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value "></a></div> 
          </div>

而LESS将是这样的

@cell-size: 50px;
.sudoku {
  margin: 70px auto;  
  width: 478px;
  background: #777;    
  border: 2px solid #000;
  box-shadow: 15px 15px 20px #111;

  .sudoku-row {    
    .sudoku-square {      
      float: left;
      border: 1px solid #000;

      .cell:nth-child(3n+1) {
        clear: both;
      }
      .cell {
        float: left;        
        position: relative;
        height: @cell-size;
        width: @cell-size;
        background:#fff;        
        border: 1px solid #000;
        box-sizing: content-box;        

        a {
          margin: 0;
          padding: 0;
        }
        a.cell-value {
          display: block;
          font-size: 30px;            
          color: #000;
          width: @cell-size;
          height: @cell-size;
          text-align: center;          
        }

        a.cell-value:hover {
        text-decoration: none;
        }
      }      
    }
    clear: both;
  }
}

您可以找到实时演示here

Answer 4

出色的解决方案Jukka。我使用了这个和以下.erb代码的组合来动态生成表并弹出内容。

@current_solution是我的数组，包含每个单元格的值。

<table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>

  <% 3.times do |all_box_rows_value|%>
  <tbody>
    <% 3.times do |box_row_value| %> 
      <%  all_box_rows = all_box_rows_value * 27 %>
        <% all_rows = ((box_row_value +1 ) * 9)-9 %>
        <tr><%9.times do |row| %>
          <% index = all_box_rows+all_rows+row %>
          <% value = @current_solution[index] %><td>
          <% colour_class = get_colour_class index %>
          <input name="cell[]" type="text" maxlength="1" autocomplete="off" value=<%=value%> >
        <% end %>
      <% end %>      
  <% end %>    
</table>

造型数独网格

4 个答案: