Face à un problème d'affichage: flex, devrais-je utiliser float à la place

Question

Je travaille sur un petit projet de rêve. Le rêve est de permettre de jouer aux échecs en ligne. Dans le cadre de ce projet, je veux avoir un widget d'échiquier côté client qui est d'abord accessible aux aveugles. Je ne suis pas bon du tout et j'ai besoin d'aide.

J'ai javascript écrit pour générer 3 choses

1. Une liste non ordonnée avec des étiquettes pour les lignes (ou les rangs comme on l'appeler en termes d'échecs).

2. Une carte que je veux adjacente à la liste des étiquettes de rang.

3. Une liste non numérotée d'étiquettes de colonnes (ou des fichiers comme on pourrait l'appeler en termes d'échecs). Je voudrais l'avoir disposé horizontalement sous l'échiquier.

J'ai réussi à générer du balisage en utilisant javascript et je l'ai fait apparaître sur la page. De plus, j'ai des événements de clavier attachés au tableau qui me permettent de naviguer sur le tableau annonçant l'étiquette de rang et l'étiquette de fichier pour un carré.

Voici ce qui sera rendu sur la page:

<div id="main"> 
    <div class="boardWrapper"> 
     <div class="upperSection"> 
      <ul class="rankLabels leftLabelSpace" id="rank"> 
       <li id="rank_0">8</li> 
       <li id="rank_1">7</li> 
       <li id="rank_2">6</li> 
       ... 
       <li id="rank_7">1</li> 
      </ul> 
      <table role="grid" class="board rightBoardSpace" id="chessBoard"> 
       <!--8x8 gridcells here--> 
      </table> 
     </div> 
     <div class="lowerSection"> 
      <div class="leftLabelSpace"><!--empty div--></div> 
      <ul id="file" class="fileLabels rightBoardSpace"> 
       <li id="file_0">a</li> 
       <li id="file_1">b</li> 
       <li id="file_2">c</li> 
       ... 
       <li id="file_7">h</li> 
      </ul> 
     </div> 
    </div> 
</div> 

Voici le css que je joue avec. D'une manière ou d'une autre, je ne peux pas obtenir l'interface utilisateur rendue comme indiqué dans ce image of chess board.

#main { 
    width: 100%; 
    height: auto; 
} 
.boardWrapper { 
    margin-left: auto; 
    margin-right: auto; 
    width: 560px; 
    height: 560px; 
    display: flex; 
} 
.upperSection { 
    flex: 1; 
    display: flex; 
    width: 100%; 
} 
.lowerSection { 
    clear: left; 
    display: flex; 
    width: 100%; 
    height: 5em; 
} 
.leftLabelSpace { 
    width: 5em; 
    height: 100%; 
} 
.rankLabels { 
    list-style-type: none; 
} 
.rankLabels li { 
    text-align: center; 
    vertical-align: middle; 
    font-weight: bold; 
    height: 12.5%; 
} 
.fileLabels { 
    list-style-type: none; 
    flex: 1; 
} 
.fileLabels li { 
    float: left; 
    text-align: center; 
    vertical-align: middle; 
    font-weight: bold; 
    width: 12.5%; 
} 
.board { 
    table-layout: fixed; 
    border: 1px solid black; 
    border-collapse: collapse; 
    border-spacing: 0px; 
    height: 100%; 
    width: 100%; 
} 

Quelqu'un peut-il m'aider à comprendre le fonctionnement des flotteurs et du flex? Je suis mauvais au css. Si quelqu'un est intéressé, ils peuvent contribuer une solution sur axchessible github repository.

Merci d'avance!

Answer 1

Vous pouvez créer ceci avec seulement une table. Vous n'avez pas besoin d'utiliser des listes.

jsFiddle: https://jsfiddle.net/2dkjcoqp/

#main { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.boardWrapper { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 560px; 
 
    height: 560px; 
 
} 
 

 
.board { 
 
    table-layout: fixed; 
 
    border: none; 
 
    border-collapse: collapse; 
 
    border-spacing: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
table.board tr td { 
 
    border: 1px solid black; 
 
} 
 

 
table.board tr:nth-of-type(odd) td:nth-of-type(odd), 
 
table.board tr:nth-of-type(even) td:nth-of-type(even) { 
 
    background-color: white; 
 
} 
 
table.board tr:nth-of-type(even) td:nth-of-type(odd), 
 
table.board tr:nth-of-type(odd) td:nth-of-type(even) { 
 
    background-color: black; 
 
}

<div id="main"> 
 
    <div class="boardWrapper"> 
 
    <table role="grid" class="board" id="chessBoard"> 
 
     <tr> 
 
     <th id="rank_0">8</th> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <th id="rank_1">7</th> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <th id="rank_2">6</th> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <th id="rank_3">5</th> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <th id="rank_4">4</th> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <th id="rank_5">3</th> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <th id="rank_6">2</th> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <th id="rank_7">1</th> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <th></th> 
 
     <th id="file_0">a</th> 
 
     <th id="file_1">b</th> 
 
     <th id="file_2">c</th> 
 
     <th id="file_3">d</th> 
 
     <th id="file_4">e</th> 
 
     <th id="file_5">f</th> 
 
     <th id="file_6">g</th> 
 
     <th id="file_7">h</th> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>