CSS 显示 :table-row does not expand when width is set to 100%

Question

我遇到了一些问题。我正在使用 FireFox 3.6 并具有以下 DOM 结构:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

以及以下 CSS:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

如果我取消 display:table-row 它将正确显示，view-row 显示 100% 的宽度。如果我把它放回去，它会缩小。我已经把它放在 JS Bin 上了:

http://jsbin.com/ifiyo

这是怎么回事？

Answer 1

如果您正在使用 display:table-row 等，那么您需要适当的标记，其中包括一个包含表。没有它，您的原始问题基本上会提供等效的错误标记:

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

上面的表格在哪里？你不能无中生有一行(tr 必须包含在 table、thead、tbody 等中)

相反，使用 display:table 添加一个外部元素，将 100% 宽度放在包含元素上。两个内部单元格将自动变为 50/50 并将文本与第二个单元格对齐。忘记带有表格元素的 floats。这会引起很多头痛。

标记:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS:

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}