CSS: qual è il modo migliore per creare una griglia Sudoku 9x9?

Sto lavorando su alcuni progetti per migliorare il mio HTML e CSS. Uno dei quali è un semplice risolutore di Sudoku. Devo creare una griglia in cui inserire etichette o caselle di testo. Voglio un layout di griglia esattamente come l'immagine Grid in questo question.CSS: qual è il modo migliore per creare una griglia Sudoku 9x9?

Qual è il modo migliore per raggiungere questo obiettivo? CSS ... o tabelle? E come andrei a creare questo?

fonte

2009-06-14 GenericTypeTea

Se si tratta di dati tabulari, è possibile utilizzare una tabella. Se si desidera attenersi ai DIV, è possibile farlo facilmente impostando valori di larghezza/altezza specifici per ciascun cubo genitore e i cubetti figlio e spostandoli semplicemente verso sinistra/destra. Assicurati di utilizzare lo clear fix per impedire al contenuto di scorrere oltre i tag di pari livello se decidi di NON utilizzare valori di larghezza/altezza espliciti.

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

fonte

2009-06-14 19:48:12 Sampson

Grazie per quello, ma qual è la soluzione chiara? – GenericTypeTea

Siamo spiacenti, se si utilizza un'altezza esplicita sui contenitori padre, non sarà necessario utilizzare la "correzione chiara". Ma solo per guadagno personale, la correzione chiara non è altro che l'aggiunta di un DIV al di sotto degli elementi fluttuanti. Quel nuovo div avrebbe "chiaro: entrambi" per assicurarsi che gli elementi flottanti non si sovrappongano a ciò che precedono. – Sampson

+1 per usare una tabella. Questo è un dato tabellare. –

Wow Jonathan Sampson era VELOCE e merita il merito! Ecco il mio approccio:

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

fonte

2009-06-14 20:00:21 merkuro

Grazie per questo, è sempre bene vedere più soluzioni! Penso che preferisco questo perché è molto più pulito, ma come hai detto tu, Jon era più veloce. – GenericTypeTea

Secondo me dovresti contrassegnare questa risposta come accettata, quando preferisci. Accettare non è vincolato alla risposta più veloce. – tanascius

CSS: qual è il modo migliore per creare una griglia Sudoku 9x9?

risposta

Problemi correlati