css - 为 "padding-top"div 的内容设置 "table-cell"时的奇怪行为

Question

有人可以向我解释这种行为吗？

拿这段代码:

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

注意最后一个 <div />有 padding-top

虽然只有这一个有，但前面都是<div />有填充物。

这是为什么呢？有没有一种方法可以防止填充应用于其他 div 而只应用于相关的 div？

谢谢， 雷内

Answer 1

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

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

vertical-align: top;

到div，作为this显示。

还要记住，如果您要显示表格数据，您应该只使用常规的 table。