ディスプレイの問題点：flex、代わりにfloatを使用する必要があります

Question

私は小さな夢のプロジェクトに取り組んでいます。夢は、チェスをオンラインでプレイできるようにすることです。このプロジェクトの第1部として、私は最初に目の不自由な人にアクセス可能なクライアントサイドのチェスボードウィジェットを用意したいと考えています。私はCSSがうまくいかず、助けが必要です。

私は3つの事

1. （1チェスの用語で、それを呼ぶだろうとか、ランク）行のラベル付き順序なしリストを生成するためにJavaScriptを書きました。

2. ランクラベルのリストに隣接したいボードです。

3. 列ラベル（またはファイルで、チェス語で呼び出すように）の順序付けられていないリストです。私はこれをチェス盤の下に水平に配置したいと思います。

私はjavascriptを使用してマークアップを生成することができ、それをページに表示させました。さらに、ボードにキーボードイベントが添付されているので、ボードをナビゲートして、正方形のランクラベルとファイルラベルをアナウンスすることができます。ここで

は、ページ上でレンダリングされるものです。ここで

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

は私が遊んだCSSです。何とか私はこのimage of chess boardに示すようにレンダリングされたUIを取得できません。

#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%; 
} 

フロートとフレックスの仕組みを理解できますか？私はCSSで悪いです。誰でも興味があれば、axchessible github repositoryのソリューションを提供できます。

ありがとうございます！

Answer 1

これはテーブルのみで作成できます。リストを使う必要はありません。

jsfiddle：あなたは `table`を使用しているので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>