如何使用基于div的表跨列？

Question

我想让一个单元格穿过两列，下面有两个单元格。如何在CSS中使用<div>元素执行此操作？它应该等同于：

<table>
  <tr>
    <td colspan="2">Major column</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
  </tr>
</table>

请注意，C1和C2不一定分别为50％。值可能会根据其内容而改变。我还需要这些单元格中的所有项目，无论排队的行数是多少，就像在表格中一样。

Answer 1

您需要标记：

<div class="main">
    <div class="topRow">Major column</div>
    <div class="leftCol">C1</div>
    <div class="rightCol">C2</div>
<div>

然后用一些css来定位它们：

div.topRow {
  width:100%;
  clear:both;
}
div.leftCol {
  width:50%;
  float:left;
}
div.rightCol {
  width:50%;
  float:right;
}

Answer 2

如果用于布局，我建议将它们放在容器div中。

HTML：

<div> full width </div>
<div class="column50"> left </div>
<div class="column50"> right </div>

CSS：

div.column50 {
    float: left;
    width: 50%;
}

如果不清楚，则不需要为此案例创建两个单独的CSS类。最后两个div都有50％的宽度，没有边距，没有填充。将它们设置为50％宽度和左浮动具有与设置右浮动而不是右浮动相同的效果。

Answer 3

以上所有内容都可行，但请记住 元素将在IE6中从其父div中“转义”。这是一个痛苦，但IE6支持仍然是大多数人需要考虑的事情。

逃逸的解决方案是给包含元素一个高度或宽度（任何会做，它会伸展到适合通常1％是我使用的。）。

另外，如果设置宽度，请记住，除了元素的宽度之外，您设置的任何边框或边距都是，因此如果您设置两个带有边框或边距的div为50％ ，你会得到一个换行符。

Answer 4

  

“请注意，C1和C2不是   必然会达到50％。该   价值可能会根据他们而改变   内容。我还需要所有物品   那些细胞无论有多少行   就像他们一样排队   会在一张桌子里。“

以上是不可能以交叉浏览器的方式，不使用表（您可以使用CSS模拟表格布局：“display：table”，但这在IE6或IE7中不起作用）。

我建议你在使用CSS而不是表格进行设计时会有所不同，不可能只用“div”替换“tr”和“td”，并且让事情像过去那样神奇地工作。我建议你设置底部“单元格”的宽度，并使用人们给你的一个选项。

希望有所帮助！