Question

我无法想出这个。将display:table与display:table-cell一起使用时，将img标记放在cell1或cell2中将强制内容（例如“This is a test”内容），在另一个单元格中放置图像下方。它是否正确？它在所有浏览器中都这样做，所以我认为这是正确的，但为什么呢？

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

Answer 1

嗯。表格单元格中vertical-align: top。

工作示例：at jsFiddle

Answer 2

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

我建议只使用表格，如果不是这种情况，请使用浮点数，然后按照这种方式创建。

Answer 3

为您的“细胞”div设置style="verticle-align:top"

奇怪的{display：table}行为

3 个答案: