Question

我正在开发一个包含多个表的布局，我试图以比直接页面更容易阅读的格式放置。我需要每行不同大小的单元格，所以我使用div标签，但我还需要div标签中的表格垂直对齐，所以我使用display：table-cell style。

我遇到的问题是第一个“表格行”按照我的意愿运行，但是第二个表行只是将所有内容一起打到左边。我做了一个快速的JSFiddle来展示我在说什么。我错过了什么？或者我做错了什么？

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

问题是你的表行[sic]和单元格没有引用点。通常他们依靠父table来定义他们的定位。

要让TD按预期行事，请将整个TR块包裹在另一个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

然而，应该说，这种布局方法只适用于边缘情况。有更简洁的方法来实现灵活的布局（应避免使用内联样式，如 the plague ）。

Div标签显示为表格不符合我的预期

1 个答案: