我需要使用 DIV 在网站上创建磁贴网格。一些瓷砖可以向下延伸并覆盖两行,一些瓷砖可以向右延伸以覆盖两列。
假设我找到了一种正确放置所有这些图 block 的方法,是否可以直接使用 CSS 来做到这一点?我们希望避免使用绝对定位,因为网站应该在多个设备上正确呈现。
作为测试,我想到了以下图 block 布局,但我想不出一种正确呈现它的方法。
+-------+---+
| | |
+---+---+ |
| | | |
| +---+---+
| | |
+---+-------+
有什么想法吗?
最佳答案
这是一个尝试:
<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 .
关于css - 将 DIV 跨越多行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14092402/