Html 为什么一个表格单元中的元素大小会影响另一个表格单元中元素的对齐？

我对以下HTML有一个问题（我添加了红色边框以帮助您查看问题）：

1.
2.

当我在我的桌面浏览器上运行它时，它看起来像“1”出现在它自己的列中，但就高度而言，它似乎与画布的底部对齐

下面是我的问题：

为什么“1”显示在画布的同一行上，“2”显示在单独的行上？假设“1”和“2”从左侧单元格的顶部开始依次显示，画布显示在另一个不相关的单元格中

对于大多数浏览器，您打算如何解决这个问题，以便编号的项目显示在画布的旁边而不是下方

另外，从我的android手机浏览器上看，把它插入JSFIDLE看起来不错

提前谢谢你

为什么“1”和画布上的“2”出现在同一行 独立线路？假设“1”和“2”彼此出现 从左侧单元格的顶部开始，画布位于另一个单元格中 不相关的细胞

div

是块elvel元素，要使它们显示在同一行上，您需要将它们设置为例如

display:inline block

对于大多数浏览器，您打算如何解决这个问题，以便
项目显示在画布旁边，而不是画布下方

添加
垂直对齐：顶部到父级
div


因此，修订后的代码如下所示：

<div style="display: table; border: 1px solid red;">
    <div style="display: table-row; border: 1px solid red;">
        <div style="display: table-cell; vertical-align:top;border: 1px solid red;">
            <div style="display:inline-block;">1</div>
            <div style="display:inline-block;">2</div>
        </div>
        <div style="display: table-cell; border: 1px solid red;">
            <div style="display: inline-block">
                <canvas style="border: 1px solid red;"></canvas>
            </div>
        </div>
    </div>
</div>

内联块工作得很好。谢谢但是，垂直对齐：顶部似乎没有预期的效果。它使文本实际上看起来比画布低。
<div style="display: table; border: 1px solid red;">
    <div style="display: table-row; border: 1px solid red;">
        <div style="display: table-cell; vertical-align:top;border: 1px solid red;">
            <div style="display:inline-block;">1</div>
            <div style="display:inline-block;">2</div>
        </div>
        <div style="display: table-cell; border: 1px solid red;">
            <div style="display: inline-block">
                <canvas style="border: 1px solid red;"></canvas>
            </div>
        </div>
    </div>
</div>

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div>1</div>
            <div>2</div>
        </div>
        <div class='cell'>
            <div>
                <canvas></canvas>
            </div>
        </div>
    </div>
</div>

.table {
    display:table;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    vertical-align:top;
}
.cell div {
    display:inline-block;
}
.table, .row, .cell, canvas {
    border:1px solid red;
}