html - 面对显示 :flex, 的问题，我应该改用 float

Question

我正在做一个小梦想元素。梦想是能够在线下棋。作为这个元素的一部分，我想要一个首先可供盲人访问的客户端棋盘小部件。我根本不擅长 CSS，需要一些帮助。

我编写了 javascript 来生成 3 个东西

1. 带有行标签的无序列表(或象棋术语中所说的排名)。

2. 我想要与排名标签列表相邻的板。

3. 列标签的无序列表(或国际象棋术语中的文件)。我想将其水平排列在棋盘下方。

我已经设法使用 javascript 生成标记并将其显示在页面上。此外，我在面板上附加了键盘事件，这使我可以在面板上导​​航，宣布方 block 的排名标签和文件标签。

这是在页面上呈现的内容:

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

谁能帮我理解 float 和 flex 是如何工作的？我不擅长CSS。如果有人感兴趣，他们可以在 axchessible github repository 上提供解决方案。 .

提前致谢!

Answer 1

您可以只用一张表来创建它。您不需要使用列表。

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>