如何使div跨越网格中的多个行和列？

Question

基于上一个问题,我正在尝试为我的网格布局添加更大的块.在最后一个问题中,我需要一个div跨度多行.现在的问题是我需要一个div来跨越多个行和列.

如果我有一个五行元素,我怎么能在它的中间放置更大的元素？(因为float它自然而然地放在一边).

这是一个示例代码段:

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

<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 larger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

我不想display: grid用于包装元素,因为我可以使用 状态这是一个非常先进的技术.我希望有一个非网格,非表格解决方案.

以下是我希望从上面的代码段中获得的内容

Answer 1

我知道您正在寻找一个不涉及HTML表格或CSS网格布局的答案.您提到由于浏览器支持较弱,您不希望使用Grid.

但是,大约在您发布问题的同时,大多数主流浏览器都发布了新版本,这些版本提供了对Grid Layout的完全支持(请参阅下面的详细信息).

CSS Grid使您的布局变得简单.无需更改HTML,添加嵌套容器或在容器上设置固定高度(请参阅本页的我的flexbox答案).

#wrapper {
  display: grid;                            /* 1 */
  grid-template-columns: repeat(5, 90px);   /* 2 */
  grid-auto-rows: 50px;                     /* 3 */
  grid-gap: 10px;                           /* 4 */
  width: 516px;
}

.tall {
  grid-row: 1 / 3;                          /* 5 */
  grid-column: 2 / 3;                       /* 5 */
}

.wide {
  grid-row: 2 / 4;                          /* 6 */
  grid-column: 3 / 5;                       /* 6 */
}

.block {
  background-color: red;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block tall"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

的jsfiddle

这个怎么运作:

1. 建立块级网格容器.
2. 该grid-template-columns属性设置显式定义列的宽度.在这种情况下,指示网格创建90px宽度的列,并重复该过程5次.
3. 该grid-auto-rows属性设置自动生成(隐式)行的高度.这里每行高50px.
4. 该grid-gap属性是一个速记grid-column-gap和grid-row-gap.此规则在网格项之间设置10px的间隙.(它不适用于物品和容器之间的区域.)
5. 指示.tall项目跨越第1行到第3行以及第2行到第3行.*
6. 指示.wide项目跨越第2行到第4行以及第3行到第5行.*

^{*在五列网格中有六列线.在三行网格中有四行线.}

浏览器支持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

Answer 2

保持 HTML 不变，Flexbox 本身无法实现布局。这主要是因为 2 x 2 框占据了第三列和第四列。你能得到的最接近的是：

#wrapper{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 180px;
  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"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

正如您所看到的，大盒子在列之间被分解。

正如您引用的另一篇文章中提到的，由于您的子元素 ( .block) 具有固定的高度，因此我们可以确定容器 ( .wrapper) 的高度。

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

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

或者，如果您可以添加容器，那么布局就很容易。只需创建四个嵌套的 Flex 容器来容纳第 1、2、3-4 和 5 列，即可完成。

#wrapper {
  display: flex;
  width: 516px;
}

section {
  display: flex;
  flex-direction: column;
}

.block {
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}

.bigger {
  flex-basis: 110px;
}

section:nth-child(3) {
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 0 200px;
}

section:nth-child(3)>.block:last-child {
  flex: 0 0 190px;
  height: 110px;
}

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

否则，请参阅这篇文章了解更多详细信息和其他选项：

• 弹性项目是否可以与其上方的项目紧密对齐？