“显示：表格单元”没有一致的对齐方式

Question

一旦在div标签和HTML标签（例如标题，换行符）之间，内容将不再对齐。 示例：Html.DisplayFor（...）应该总是合理的结束。 如何解决？

<div class="table">
    <div class="row">
        <div class="cell">
            <h3>Heading 1</h3>
            <hr />
            <div class="row">
                <div class="cell">Label 1</div>
                <div class="cell">Html.DisplayFor(...)</div>
            </div>
            <div class="row">
                <div class="cell">Label 2 with much more Text</div>
                <div class="cell">Html.DisplayFor(...)</div>
            </div>
            <br />
            <h3>Heading 2</h3>
            <hr />
            <div class="row">
                <div class="cell">Label 3 with Text</div>
                <div class="cell">Html.TextBoxFor(...)</div>
            </div>           
        </div>
        <div class="cell">
            ...
        </div>
    </div>
</div>

CSS：

div .table {
    display: table;
    width: 100%;
}

div .cell {
    display: table-cell;
    padding: 0.3em;
}

div .row {
    display: table-row;
}

实际上应该看起来像这样（红线）：

Answer 1

这是因为您不通过仅使用table->row/cell结构而是在其中间注入div和hr元素来破坏布局的流程。

您可以简单地在第一列中添加宽度：

.row .cell .row .cell:first-child{
    width:200px;
}

演示小提琴