CSS - 什么是创造一个9x9的数独网格的最佳方式？ [英] CSS - What's the best way of creating a 9x9 Sudoku grid?

问题描述

我在几个项目的工作，以提高我的HTML和CSS。其中之一是一个简单的数独解算器。我需要建立一个网格，在其中放置任何标签或文本框。我希望有一个网格布局酷似在这个网格像<一个href=\"http://stackoverflow.com/questions/305860/how-would-you-construct-and-interact-with-a-grid-like-a-sudoku-board\">question.

I am working on a few projects to improve my HTML and CSS. One of which is a simple Sudoku solver. I need to create a Grid in which to put either Labels or TextBoxes. I want a grid layout exactly like the Grid image in this question.

什么是实现这一目标的最佳途径？三网融合或表？我将如何去创造呢？

What's the best way of achieving this? CSS... or tables? And how would I go about creating this?

推荐答案

如果是表格数据，你可以使用一个表。如果你想坚持使用DIV的，你可以为每个父多维数据集设置特定的宽度/高度值，孩子幼崽，并简单地浮动他们的左/右做到这一点很容易。只是一定要使用明确修复的内容保持距离流过他们的兄弟姐妹的标签，如果你决定不使用显式宽度/高度值。

If it's tabular data, you can use a table. If you want to stick with DIV's, you can do that easily by setting specific width/height values for each parent cube, and the child cubs, and simply floating them left/right. Just be sure to use the clear fix to keep the content from flowing past their sibling tags if you decide NOT to use explicit width/height values.

#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>

这篇关于CSS - 什么是创造一个9x9的数独网格的最佳方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！