Css 设置时的奇怪行为"；“填充顶部”；对于a"；表格单元格“；div

有人能给我解释一下这种行为吗

以这个代码为例：

<div style="position:relative; width:960px; margin-left:auto; margin-right:auto; ">
    <div style="background-color:pink;">
        <div style="display:table-cell; padding:10px; width:299px; border-right: solid 1px #f0f0e7; background-color:BlueViolet;">
            <div>TEST#1</div>
        </div>
        <div style="display:table-cell; padding:10px; width:299px; border-right: solid 1px #f0f0e7; background-color:Purple;">
            <div>TEST#2</div>
        </div>
        <div style="display:table-cell; padding:10px; width:299px; border:none; background-color:Purple;">
            <div><div style="padding-top:100px; background-color:Yellow;">TEST#3</div></div>
        </div>
    </div>
</div>

测试#1
测试#2
测试#3

请注意，最后一个

具有填充顶部

虽然只有这一个有它，所有前面的

都有填充

为什么会这样？是否有办法防止填充应用于其他div，而仅应用于相关div

谢谢,，

---

勒内

因为桌子就是这样工作的！行中的每个单元格始终具有相同的高度，就像列中的每个单元格具有相同的宽度一样

如果您期望这种行为，但希望文本尽可能高，请添加样式

vertical-align: top;

到

divs

，如图所示

---

还要记住，如果要显示表格数据，只需使用常规的

表格

哇，明白了。我知道高度必须相同。但我不明白为什么所有的单元格都要用填充顶。。。顺便说一句，谢谢你的JSFIDLE链接！没问题，这是一个很好的资源！如果这回答了您的问题，您可以单击向上/向下投票下面的勾号。我的意思是，当将边距顶部设置为某个div时，为什么所有其他div的内容都在底部对齐看到此代码我很想让您解释一下。。。但是你给了我一个很好的提示，告诉我如何达到要求的结果，因此，如果你回答了这个问题，我会告诉你的……对不起！我不在。所有文本位于单元格底部的原因是

vertical align

的默认值为bottom，因此所有文本都尽可能低。