跨越多行的DIV

Question

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

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

作为测试，我想出了以下的平铺布局，我想不出一种正确渲染方法。

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

有什么想法吗？

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。

Answer 2

使用类似的东西：

<强> HTML

<div class="wrap">
    <div class="col2row1"></div>
    <div class="col1row2 right"></div>
    <div class="col1row2"></div>
    <div class="col2row1 right"></div>
</div>​

<强> CSS

div {border: 1px solid #999; float: left;}
.wrap {overflow: hidden; width: 160px; border: 0; float: none; margin: 100px;}
.col1row2 {width: 50px; height: 100px;}
.col2row1 {width: 100px; height: 50px;}
.right {float: right;}​

小提琴：http://jsfiddle.net/NBcEw/

截图：

---

而不是麻烦，还有另一个插件：

jQuery Masonry是jQuery的动态布局插件，是CSS浮动的另一面。