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

可以在下图中看到所需的结果：

enter image description here

Answer 1

您想要的结果看起来不像普通的表格布局。第一行中列的宽度与第二行中列的宽度不同。
您正尝试在一个元素中打开一个表单标记，然后在另一个元素中将其关闭。

用实际表格替换标记不会产生您想要的结果，而display:table不会有任何不同的效果。

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

Answer 2

你不需要漂浮div或表来达到你想要的结果。

像http://jsfiddle.net/veYTv/2/这样简单的东西可以实现你想要的外观（注意：我已经对这个跨浏览器进行了扩展检查，可能需要进行较小的css调整）

<h1><img src="" width="70px" height="70px" />TEST</h1>
<input type="text"></input>
<input type="submit" value="Submit"></input>

Answer 3

工作！嵌套表：

CSS

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

HTML

<div id="table">
        <div class="table-row_1">
           <div class="table-cell"> <img src="" height="70px" width="70px">
            </div>
          <div class="table-cell">
           <h1>TEST</h1>
         </div>
       </div>
        <div class="table-row">
         <div class="table-cell">
           <form> <input type="text"> </form>
         </div>
         <div class="table-cell"> <input value="Submit" type="submit"> </div>
       </div>
     </div>

http://jsfiddle.net/antoniodl/mF3PU/2/ 再见

CSS显示：表格

3 个答案: