Html 面对display:flex的问题，我应该改用float吗

我在做一个小小的梦想项目。梦想是能够在线下棋。作为这个项目的第一部分，我想有一个客户端棋盘小部件，首先是盲人可以访问。我不擅长css，需要一些帮助

我已经编写了javascript来生成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>

有人能帮我理解浮动和flex是如何工作的吗？我不擅长css。如果有人感兴趣，他们可以提供一个解决方案

---

提前谢谢

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

jsfiddle：

#主{
宽度：100%；
高度：自动；
}
.木板纸{
左边距：自动；
右边距：自动；
宽度：560px；
高度：560px；
}
.董事会{
表布局：固定；
边界：无；
边界塌陷：塌陷；
边界间距：0px；
身高：100%；
宽度：100%；
}
表1.1董事会tr td{
边框：1px纯黑；
}
表1.板tr:N型（奇数）td:N型（奇数），
表1.电路板tr:N型（偶数）td:N型（偶数）{
背景色：白色；
}
表1.电路板tr:N型（偶数）td:N型（奇数），
表1.电路板tr:N型（奇数）td:N型（偶数）{
背景色：黑色；
}

8.
7.
6.
5.
4.
3.
2.
1.
A.
B
C
D
E
F
G
H

既然您使用了

表

，为什么不简单地为列/文件添加一个额外的列/行呢？是的，我是这样想的。但后来我想到了如何应用高度和宽度。现在我简单地将单元格的大小调整为高度和宽度的12.5%。对于附加的列和行（高度和宽度不同），无法确定css类是什么。因此，我认为我最好使用一个包含以上三个内容的容器，其中我给出了固定的高度（对于文件）和宽度（对于列组）。休息空间可由板（表）占用，其中每个单元占12.5%。即使在最后一排（排名1）也没有达到正确的高度。不过我觉得有一个小错误。屏幕阅读器现在宣布“h”列（板的第8列，但表的第9列）为第9列。我将尝试使用第一列单元格的aria hidden，看看是否有效。

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