Question

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

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

当我在桌面浏览器上运行它时，它看起来像＆＃34; 1＆＃34;出现在它自己的列中，但在高度方面它似乎与画布的底部对齐。

所以这是我的问题：

为什么＆＃34; 1＆＃34;与画布和＆＃34; 2＆＃34;出现在同一行。在另一条线上？＆＃34; 1＆＃34;和＆＃34; 2＆＃34;假设从左侧单元格的顶部开始彼此出现一个，而另一个不相关的单元格中的画布出现。
您如何建议为大多数浏览器修复此问题，以便编号的项目显示在画布旁边而不是在它下面？

P.S。把它插入jsfiddle似乎从我的Android手机浏览器看起来很好

先谢谢你了！

Answer 1

Demo Fiddle

为什么＆＃34; 1＆＃34;与画布和＆＃34; 2＆＃34;出现在同一行。在...上单独的线？＆＃34; 1＆＃34;和＆＃34; 2＆＃34;假设彼此出现一个从左侧单元格的顶部开始，在另一个单元格中从画布开始不相关的细胞。

div是块级别元素，要将它们显示在您需要将它们设置为的同一行上，例如display:inline-block;

您如何建议为大多数浏览器修复此问题，以便编号项目出现在画布旁边而不是在它下面？

将vertical-align:top;添加到父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>

考虑到这一点，通常最好将样式与内容分开，而不依赖于内联CSS，例如：

Demo Fiddle

HTML

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

CSS

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

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

1 个答案:

Demo Fiddle

Demo Fiddle