css - 显示为表格的 Div 标签无法按预期工作

Question

我正在处理一个包含多个表格的布局，我试图将这些表格放入比直接在页面下方更容易阅读的格式。每行需要不同大小的单元格，所以我使用了 div 标签，但我还需要 div 标签内的表格垂直对齐，所以我使用了 display:table-cell 样式。

我遇到的问题是第一个“表格行”完全按照我希望的方式运行，但第二个表格行只是把左边的所有东西都挤在一起。我做了一个快速的 JSFiddle 来展示我在说什么。我错过了什么？或者我做错了什么？

http://jsfiddle.net/K8AJn/

HTML:

<div class="TR">
    <div class="TD" style="width:40%;">
    Info
    </div>

    <div class="TD" style="width:20%;">
    Some info
    </div>

    <div class="TD" style="width:40%;">
    More info
    </div>
    </div>
    <br />

    <div class="TR">
    <div class="TD" style="width:50%;">
    Info 1
    </div>

    <div class="TD" style="width:50%;">
    Info 2
    </div>
</div>
<br />

CSS:

div.TR {
    background-color:blue;
    display: table-row;
}
div.TD {
    background-color:red;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}

Answer 1

问题是您的表格行 [原文如此] 和单元格没有引用点。通常他们会依靠父 table 来定义他们的定位。

为了让您的 TD 表现得像预期的那样，将整个 TR block 包装在另一个 div 中，类为 TABLE 并使用以下内容:

.TABLE {
    display: table;
}

HTML:

<div class="TABLE">
    <div class="TR">
        <div class="TD" style="width:40%;height:300px;">Info</div>
        <div class="TD" style="width:20%;height:300px;">Some info</div>
        <div class="TD" style="width:40%;height:300px;">More info</div>
    </div>
    <div class="TR">
        <div class="TD" style="width:50%;height:300px;">Info 1</div>
        <div class="TD" style="width:50%;height:300px;">Info 2</div>
    </div>
</div>

这是一个 Fiddle

然而，应该说，这种布局方式只适用于边缘情况。有更简洁的方法来实现灵活的布局(并且应该避免像瘟疫这样的内联样式)。