不使用表格的特殊 css 布局

Question

我正在尝试构建这个 css 模板：

这里是每个块的描述和高度：

第 1 块

• width：页面宽度
• 高度：100px

第 2 块

• 最小宽度：300px;
• 宽度随内容增长；
• height：block 1 剩下的所有高度

第 3 块

• width：块2剩下的所有宽度
• height：block 1 和 4 剩下的所有高度

第 4 块

• width：块2剩下的所有宽度
• 高度：150px

每个块之间的边距为 20px。 最终布局的宽度和高度需要填满页面的整个空间，但不能超过（没有滚动条）。

我设法使用表格来做到这一点，但我宁愿拥有一个基于 div 的 css。关于如何做到这一点的任何想法。

PS：我用的是指南针

编辑： 这是我正在尝试做的演示：

http://jsfiddle.net/jcEwJ/1/

但我使用的html是：

<table>
    <tr>
        <td colspan="2" class="block1">
            <div class="block">
                Block 1
            </div>
        </td>
    </tr>
    <tr>
        <td rowspan="2" class="block2">
            <div class="block">
                Block 2
            </div>
        </td>
        <td class="block3">
            <div class="block">
                Block 3
            </div>
        </td>
    </tr>
    <tr>
        <td class="block4">
            <div class="block">
                Block 4
            </div>
        </td>
    </tr>

</table>

Answer 1

给你...它粗糙而快速，它有很多问题......它可能需要调整，但它是一个开始......

DEMO

#block1 {
width:100%;
height:100px;
background:black;
margin-bottom:20px;
}

#block2 {
float:left;
min-width:300px;
width:20%;
height:100%;
margin-right:20px;
     }

#block3 {
width:70%;
float:left;
background:red;
min-height:400px;
margin-bottom:20px;
    }

#block4 {
width:70%;
float:left;
height:150px;
     }