html - CSS 显示 :table

Question

我正在尝试在某些 div 上使用 CSS display:table 属性，但我遇到了问题。下面是我的测试代码片段:

<div id="table">
<div class="table-row">
    <div class="table-cell">
    <img src="" width="70px" height="70px" />
    </div>
    <div class="table-cell">
    <h1>TEST</h1>
    </div>
</div>

<div class="table-row">
    <div class="table-cell">
    <form>
    <input type="text"></input>

    </div>
    <div class="table-cell">
    <input type="submit" value="Submit"></input>
    </div>
    </form>
</div>

使用以下 CSS:

#table{
display:table;
}
.table-row{
display:table-row;
}
.table-cell{
display:table-cell;
}

如下图所示:

Answer 1

• 您想要的结果看起来不像普通的表格布局。第一行的列宽与第二行的列宽不同。

• 您正试图在一个元素中打开一个表单标签并在另一个元素中关闭它。

用实际表格替换您的标记不会产生您想要的结果，并且 display:table 的工作方式也没有任何不同。

http://jsfiddle.net/veYTv/1/