Html 奇怪的{显示：表}行为_Html_Css_Css Tables

Html 奇怪的{显示：表}行为

html css

Html 奇怪的{显示：表}行为,html,css,css-tables,Html,Css,Css Tables,我搞不懂这个。当使用display:table和display:table cell时，在cell1或cell2中放置img标签将强制另一个单元格中的内容（例如“这是测试”内容）下降到图像下方。这是正确的吗？它在所有浏览器中都能做到这一点，所以我认为这是正确的，但为什么呢 <html> <head> <title></title> <style type="text/css"> html,

我搞不懂这个。当使用

display:table

和

display:table cell

时，在cell1或cell2中放置img标签将强制另一个单元格中的内容（例如“这是测试”内容）下降到图像下方。这是正确的吗？它在所有浏览器中都能做到这一点，所以我认为这是正确的，但为什么呢

<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            border: 2px solid #000;
            width: 100%;
            height: 100%;
        }
        .table {
            display: table;
            border-collapse: collapse;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div id="cell1" class="cell">
                <h1>This is a test</h1>
            </div>
            <div id="cell2" class="cell">
                <img src="" />
            </div>
        </div>
    </div>
</body>
</html>


html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
div{
边框：2倍实心#000；
宽度：100%；
身高：100%；
}
.桌子{
显示：表格；
边界塌陷：塌陷；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
宽度：50%；
}
这是一个测试

这是因为在div中插入图像会使布局脱离布局的自然流程

我建议只使用表格，或者如果不是这种情况，使用float，并以这种方式创建它。

Hm.

垂直对齐：表格单元格中的top

工作示例：

为您的“单元格”分区设置

style=“verticle align:top”

，您究竟为什么要这样做而不只是使用表格？@bern您是否可以发布一些屏幕截图或一些提供更多信息的内容，给出您的

。

a类vertical align:top
似乎解决了这个问题。@Dave：这就是在不使用语义不正确的表的情况下使用基于表的布局的方法。@jnpcl-它们的语义不正确吗？因为它们定义了HTML中的外观，而不仅仅是数据？如果是这样，那么这样做也是不正确的，原因与imo完全相同。