Question

我需要按如下方式实现网格形成：

+-------------------+ +--------+ +--------+
|1                  | |2       | |4       |
|                   | |        | |        |
|                   | |        | |        |
|                   | |        | |        |
|                   | +--------+ +--------+
|                   |
|                   | +--------+ +--------+
|                   | |3       | |5       |
|                   | |        | |        |
|                   | |        | |        |
|                   | |        | |        |
+-------------------+ +--------+ +--------+

+--------+ +--------+ +--------+ +--------+
|6       | |7       | |8       | |9       |
|        | |        | |        | |        |
|        | |        | |        | |        |
|        | |        | |        | |        |
+--------+ +--------+ +--------+ +--------+

1的大小是其他项目（图像）+边距的2倍。此外，如果viewport足够大，6和7应该回落到4和5旁边。理想情况下，会有一个干净的解决方案，不需要将元素包装到containers和/或否JavaScript，但我很想听听所有可能的解决方案。

P.S。由于浏览器的支持，Flexbox对于我的用例是不可能的，但我仍然有兴趣听到用它做出的可能的解决方案。

P.P.S。 3和4可以交换位置，但理想情况下它们会按顺序交换。

Answer 1

您可以只留下float大网格元素并使其他所有元素inline-block。

JSFiddle

HTML

<div class="big">1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>

CSS

div {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    background-color: red;
}

.big {
    float: left;
    width: 210px;
    height: 210px;
}

Answer 2

Patsy：嘿，这是你的堆栈溢出。：D无论如何，这就是我现在所拥有的：

<style>
.grid1, .grid2, .grid2-container {
    display: block;
    float: left;
}

.grid1, .grid2 {
    margin: 10px;
    border: 1px solid black;
    background-color: #ccc;
}

.grid1 {
    width: 98px;
    height: 98px;
}

.grid2 {
    width: 218px;
    height: 218px;
}

.grid2-container {
    width: 250px;
    height: 230px;
}

.clear {
    clear: both;
}
</style>
<div class="grid2">1</div>
<div class="grid2-container">
    <div class="grid1">2</div>
    <div class="grid1">4</div>
    <div class="grid1">3</div>
    <div class="grid1">5</div>
</div>
<div class="clear">
    <div class="grid1">6</div>
    <div class="grid1">7</div>
    <div class="grid1">8</div>
    <div class="grid1">9</div>
</div>

正如您所看到的，我目前的解决方案要求我使用容器，并且还要以非线性模式对内容进行排序，因此它远非最佳状态。

Answer 3

嘿使用媒体查询开始检查以下链接

http://mediaqueri.es/

http://introducingthenovel.com/

http://mediaqueri.es/tuj/

CSS网格形成不同高度的块

3 个答案:

HTML

CSS