Question

我正在使用div来制作表格（div因为我有一些复杂的设计）。我希望我的第一行有多列，第二行只是一行，跨越整行，下一行又是多列行。

第一行，第二行不是静态的，它是根据数据动态决定的。

我的css：

#table-holder {
    margin: 0 auto;
    display: table;
    border: solid 2px #b7ddf2;
    background: #ebf4fb;
    font-family: Verdana, Geneva, sans-serif;
}

#row {
    display: table-row;
    border: solid 2px #b7ddf2;
    padding: 2px 2px 2px 2px;
}

#column {
    display: table-cell;
    border: solid 2px #b7ddf2;
    padding: 2px 2px 2px 2px;
}

我的HTML：

<div id="table-holder">
  <div id="row">
    <div id="column">
    </div>
    <div id="column">
    </div>
    <div id="column">
    </div>
  </div>
  <div id="random">
      I want this to span for my whole row, instead of just 1st column.
  </div>
  <div id="row">
    <div id="column">
    </div>
    <div id="column">
    </div>
    <div id="column">
    </div>
  </div>

任何想法？

谢谢

Answer 1

你可能遇到了麻烦，因为这真的不是div的用途。它们是块级元素。如果你想创建一个表，你应该使用table，tr td等。

This使您的中间行跨越容器的宽度，但我认为它可能会夺走您正在寻找的功能。

如果你设置使用div，我建议调查浮点数和列的clearfix方法。

表格中不对称的行和列与div的

1 个答案: