javascript - 带有 div 的表中的不对称行和列

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 的用途。它们是 block 级元素。如果你想创建一个表，你应该使用 table，tr td 等。

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

如果您打算使用 div，我建议您研究 float 和列的 clearfix 方法。