HTML / CSS网格布局有不同大小的框？

Question

我正在尝试在HTML / CSS中创建一个布局（如图所示）。

我尝试过使用div和ul / li，但堆叠不起作用。

有人能指出我正确的方向吗？

Answer 1

如果你真的想在你自己的html / css（没有Bootstrap）中这样做， 你需要将右边的块与双倍高度对齐，右边浮动，其他块使用左边浮动。

Example - JSFiddle

.block {
float:left;
}

.block1x2 {
float:right;
}

Answer 2

您可以使用表标记和colspan / rowspan属性。但是，这是一个非常古老的解决方案。 你可以做的最好的事情是使用Bootstrap，就像Brad Werth所说的那样。 另一种方法是创建三类div：

• 一个用于正方形
• 一个用于水平矩形
• 一个用于垂直矩形

您应该使用相应的类创建每个div。请记住，您需要使用display属性来实现目标。