使 div 在网格中跨越两行

Question

我有一页满是 display: inline-block 的块。我想做大四倍或两倍，所以我用 float: left 或 right 来放置其他块。

我的问题是如果我有一个五元素行，我怎么能在它的中间放一个更大的元素？（如 float 自然放在一边）。

这是一个示例片段：

#wrapper{ width: 516px; } .block{ display: inline-block; width: 90px; height: 50px; margin: 5px; background-color: red; } .bigger{ height: 110px; }

<div id="wrapper"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block bigger"></div> <div class="block"></div> <div class="block"></div> </div>

这是我想从上面的代码片段中得到的内容

Answer 1

您的子元素具有固定高度 (.block)。根据这些信息，我们可以推断出容器的高度 (#wrapper)。

通过知道容器的高度，您的布局可以使用 CSS Flexbox 和 flex-direction: column 和 flex-wrap: wrap 来实现。

容器上的固定高度用作断点，告诉弹性项目在哪里换行。

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger {
  flex-basis: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle

这里解释了为什么 flex 项目不能换行，除非容器上有固定的 height/width：

Answer 2

为了使您的布局与 flexbox 一起工作，您需要使用嵌套容器或知道容器的高度（).网格不是这样。代码结构非常简单

#wrapper {
  display: grid;                                     /* 1 */
  grid-template-columns: repeat(5, 90px);            /* 2 */
  grid-auto-rows: 50px;                              /* 3 */
  grid-gap: 10px;                                    /* 4 */
  width: 516px;
}
.bigger {
  grid-row: 1 / 3;                                   /* 5 */
  grid-column: 2 / 3;                                /* 6 */
}
.block {
  background-color: red;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle

备注：

建立块级网格容器。 (spec reference)
指示网格创建一个宽度为90px的列，并重复该过程5次。 (spec reference)
网格行将隐式创建（即，根据需要自动创建）。每个隐式行的高度应为 50 像素。 (spec reference)
网格项目周围的排水沟。 grip-gap 对于 grid-row-gap 和 grid-column-gap 是 shorthand。(spec reference)
指示大项目从第1行到第3行。（两行网格中有三行。）（spec reference）。
指示大项目从网格列第2行到第3行。（五列网格中有六列行。）（spec reference）

浏览器支持 CSS 网格

Chrome - 截至 2017 年 3 月 8 日的全面支持（版本 57）
Firefox - 截至 2017 年 3 月 6 日的全面支持（版本 52）
Safari - 截至 2017 年 3 月 26 日的全面支持（版本 10.1）
Edge - 截至 2017 年 10 月 16 日的全面支持（版本 16）
IE11 - 不支持当前规范；支持过时版本

完整图片如下：http://caniuse.com/#search=grid

使 div 在网格中跨越两行

Make a div span two rows in a grid

css

grid-layout

flexbox

css-grid

jsFiddle

jsFiddle