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;

到divs，this显示。

请记住，如果您要显示表格数据，则应使用常规table。

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

1 个答案: