使用div转换复杂的表格布局

Question

我试图将表格布局迁移到更现代的div布局，但却迷失了如何做到这一点。我想要做的是让以下布局工作：

    ---------------       ----------
    |      A      |       |    B   |
    |             |       |        |
    ---------------       ----------
------------------------------------
|C |      D       |   E   |    F   |
------------------------------------
    ---------------       ----------
    |      G      |       |    H   |
    |             |       |        |
    ---------------       ----------

每个宽度都是相互依赖的，如果D的内容增长，A和G也是如此。到目前为止，我一直在尝试创建AH div，然后将它们全部封装在900px宽的div中＆＃34;内容＆＃34 ;.然后我使用position：relative并尝试将事情弄清楚，但由于＆＃34;内容＆＃34;当我使用相对定位时似乎没有扩展。有关如何处理这样的布局的任何建议？

更新： 这是我到目前为止的代码，它是凌乱的，因为我没有亲在这:) http://jsfiddle.net/favetelinguis/5R5nj/3/

Answer 1

好像你使用固定宽度的布局。尝试使用div宽度的百分比：

width: 20%;

以下是一个示例：http://jsfiddle.net/HHfQY/

更好的解决方案是使用响应式网格系统，例如http://www.responsivegridsystem.com/，这样您就不必进行所有计算。