css - 将 DIV 跨越多行

Question

我需要使用 DIV 在网站上创建磁贴网格。一些瓷砖可以向下延伸并覆盖两行，一些瓷砖可以向右延伸以覆盖两列。

假设我找到了一种正确放置所有这些图 block 的方法，是否可以直接使用 CSS 来做到这一点？我们希望避免使用绝对定位，因为网站应该在多个设备上正确呈现。

作为测试，我想到了以下图 block 布局，但我想不出一种正确呈现它的方法。

+-------+---+
|       |   |
+---+---+   |
|   |   |   |
|   +---+---+
|   |       |
+---+-------+

有什么想法吗？

Answer 1

这是一个尝试:

<div style="background-color: #f00; width: 67%; float: left;"> foo</div>
<div style="background-color: #00f; width: 32%; float: right;"> foo<br />bar</div>
<div style="background-color: #0f0; width: 32%; float: left; "> foo <br /> bar</div>
<div style="background-color: #0ff; width: 32%; float: left; "> foo </div>
<div style="background-color: #ff0; width: 67%; float: right;"> foo </div>​

参见 jsFiddle .