CSS显示：当宽度设置为100％时，table-row不会展开 [英] CSS display:table-row does not expand when width is set to 100%

问题描述

我有一个问题。我使用FireFox 3.6并具有以下DOM结构：

I'm having a bit of a problem. I'm using FireFox 3.6 and have the following DOM structure:

<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：

If I take off the display:table-row it will appear correctly, with the view-row showing a width of 100%. If I put it back it shrinks down. I've put this up on JS Bin:

http：// jsbin.com/ifiyo

发生了什么事？

推荐答案

如果您使用 display：table-row 等，则需要正确的标记，其中包含一个包含表。没有它，你的原始问题基本上提供了相同的坏标记：

If you're using display:table-row etc., then you need proper markup, which includes a containing table. Without it your original question basically provides the equivalent bad markup of:

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

上面的表格在哪里？你不能只是有一排没有地方（tr必须包含在表， thead ， tbody 等）

Where's the table in the above? You can't just have a row out of nowhere (tr must be contained in either table, thead, tbody, etc.)

而是添加一个外部元素 display：table ，将100％宽度放在包含元素上。两个内部单元格将自动转到50/50，并在第二个单元格上对齐文本。用表元素删除 float 。

Instead, add an outer element with display:table, put the 100% width on the containing element. The two inside cells will automatically go 50/50 and align the text right on the second cell. Forget floats with table elements. It'll cause so many headaches.

标记：

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

这篇关于CSS显示：当宽度设置为100％时，table-row不会展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！