css - 使一个 div 跨越网格中的两行

Question

我有一个充满 block 的页面，上面堆满了 display: inline-block。我想放大四倍或两倍，所以我使用 float: left 或 right 来放置其他 block 。

我的问题是如果我有一个五元素行，我怎么能把一个更大的元素放在中间呢？ (如 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

Flexbox 解决方案

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

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

容器上的固定高度用作断点，告诉 flex 元素在哪里换行。

#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 元素不能换行，除非容器上有固定的高度/宽度:https://stackoverflow.com/a/43897663/3597276