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”，并且让事情像过去那样神奇地工作。我建议你设置底部“单元格”的宽度，并使用人们给你的一个选项。

希望有所帮助！