Вопросы Теги

CSS - Что лучший способ создать 9x9 сетка Судоку?

Я видел самый удивительный ответ на языке Python в дубликате этого вопроса: 

from itertools import zip_longest

a = range(1, 16)
i = iter(a)
r = list(zip_longest(i, i, i))
>>> print(r)
[(1, 2, 3), (4, 5, 6), (7, 8, 9), (10, 11, 12), (13, 14, 15)]

Вы можете создать n-кортеж для любого n. Если a = range(1, 15), то результатом будет: 

[(1, 2, 3), (4, 5, 6), (7, 8, 9), (10, 11, 12), (13, 14, None)]

Если список разделен равномерно, то вы можете заменить zip_longest на zip, в противном случае триплет (13, 14, None) будет потерян. Python 3 используется выше. Для Python 2 используйте izip_longest.

5
задан Community 23 May 2017 в 11:44
поделиться

2 ответа

Если это табличные данные, вы можете использовать таблицу. Если вы хотите придерживаться DIV, вы можете легко сделать это, установив определенные значения ширины / высоты для каждого родительского куба и дочерних детенышей и просто перемещая их влево / вправо. Если вы решите НЕ использовать явные значения ширины / высоты, обязательно используйте исправление , чтобы контент не проходил мимо своих родственных тегов. 

#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>
6
ответ дан 14 December 2019 в 01:15
поделиться

Вау, Джонатан Сэмпсон был БЫСТРОМ и заслуживает похвалы! Вот мой подход: 

 <?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>
3
ответ дан 14 December 2019 в 01:15
поделиться