css - 跨越多行的 DIV

Question

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

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

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

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

有什么想法吗？

Answer 1

使用这样的东西：

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 浮动的另一面。

Answer 2

这是一个尝试：

<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。