CSS 显示：当宽度设置为 100% 时表格行不展开

发布于08月14日

我有点问题.我使用的是FireFox 3.6，具有以下DOM struct :

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

如果我go 掉display:table-row，它将正确显示，view-row显示的宽度为display:table-row%.如果我把它放回go ，它就会缩小.我把这个贴在JS-Bin上了:

http://jsbin.com/ifiyo

到底怎么回事？

推荐答案

如果使用display:table-row等，则需要适当的标记，其中包括一个包含表.如果没有它，您的原始问题基本上提供了以下等价的错误标记:

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

上面的桌子在哪里？您不能无缘无故地有一个行(tr必须包含在table、thead、tbody等中)

相反，添加一个display:table的外部元素，将display:table%的宽度放在包含元素上.两个内部单元格将自动对半，并将文本与第二个单元格对齐.忘了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;
}