Html：创建行高不同的div表

Question

如何创建由div组成的两列表格，其中行高不是相同的高度。我怎么能用CSS做这个呢？

这是我的照片：

XXXX YYYY
XXXX YYYY
     YYYY
     YYYY
     YYYY
ZZZZ
ZZZZ
ZZZZ

这就是我想要的：

XXXX YYYY
XXXX YYYY
     YYYY
ZZZZ YYYY
ZZZZ YYYY
ZZZZ  

X，Y和Z是带有信息的div。所以div Z必须与第二列不一致。

也许是一个简单的问题，但我不知道怎么回事。谢谢。

Answer 1

查看rowspan和colspan。你可以找到创造性的用途来实现你的目标。

Answer 2

您可以按照X，Y，Z的顺序在文档中使用div，然后向左浮动X，向右浮动Y并向左浮动Z.记住当然要设置div的宽度。

Answer 3

  <table>
  <tr>
  <td>
     XXXX<br/>
     XXXX<br/>
     XXXX
  </td>
  <td rowspan='3'>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY
  </td>
  </tr>
  <tr>
  <td rowspan='2'>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ
  </td>
  </tr>
  </table>

而不是通过css vertical-align：top td元素

如果您想要特定的高度，请为每组数据分配div。