css - 不使用表格的特殊 css 布局

Question

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

以下是每个块的描述和高度：

区块 1

• 宽度：页面宽度
• 高度：100 像素

第 2 座

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

区块 3

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

第 4 座

• 宽度：块2留下的所有宽度
• 高度：150 像素

并且每个块之间的边距为 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

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

演示

#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;
     }