如何使 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 for the wrapper element, as Can I Use states 这是目前非常前沿的技术。我希望有一个 非网格、非table 解决方案。

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

Answer 1

保持你的 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实现上面的布局。

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

或者，如果您可以添加容器，那么布局就很容易了。只需创建四个嵌套的弹性容器来容纳第 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>

否则，请参阅此 post 了解更多详细信息和其他选项：

Is it possible for flex items to align tightly to the items above them?

Answer 2

我了解到您正在寻找不涉及 HTML 表格 或 CSS 网格布局[=71] 的答案=].您提到您不想要 Grid，因为浏览器支持较弱。

但是，大约在您发布问题的同时，大多数主要浏览器都发布了新版本，完全支持网格布局（请参阅下面的详细信息）。

CSS Grid makes your layout simple. There is no need to alter your HTML, add nested containers or set a fixed height on the container ().

#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

工作原理：

Establish a block-level grid container.

grid-template-columns 属性设置明确定义的列的宽度。在这种情况下，网格被指示创建一个 90px 宽度的列，并重复该过程 5 次。

grid-auto-rows 属性设置自动生成的（隐式）行的高度。这里每行高 50 像素。

grid-gap 属性是 grid-column-gap 和 grid-row-gap 的 shorthand。此规则在个网格项之间设置了 10 像素的间距 。（它不适用于项目和容器之间的区域。）

Instruct the .tall item to span from row lines 1 to 3 and column lines 2 to 3.*

Instruct the .wide item to span from row lines 2 to 4 and column lines 3 to 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 3

使用 flexbox 和 flex-direction: 行来实现。

#wrapper{
  width: 516px;
  display: flex;         /* added */
  flex-flow: row wrap;   /* added */
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.block:last-child {
  margin-left: 205px;    /* added */
}
.bigger{
  height: 110px;
  margin-bottom: -55px;  /* added */
}
.larger{
  height: 110px;
  width: 190px;
  margin-left: 105px;    /* added */
  margin-bottom: -55px;  /* added */
}

<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>

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

How can I make a div span multiple rows and columns in a grid?

css

flexbox

grid-layout

css-grid

jsFiddle