Question

建立a previous question，我试图在网格布局中添加更大的块。在最后一个问题中，我需要一个div跨度多行。现在的问题是我需要一个div来跨越多行和列。

如果我有一个五元素行，我怎么能把更大的元素放在它的中间？（正如float自然而然地站在一边）。

以下是一个示例代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

我不想使用display: grid作为包装元素，因为我可以使用 states这是一项非常先进的技术。我希望有一个非网格，非表格解决方案。

以下是

以上代码段中我想提供的内容

Answer 1

我知道您正在寻找不涉及 HTML Tables 或 CSS Grid Layout 的答案。您提到由于浏览器支持较弱，您不希望使用Grid。

然而，在您发布问题的同时，大多数主流浏览器都发布了新版本，这些版本提供了对网格布局的完全支持（详见下文）。

CSS Grid使您的布局变得简单。无需更改HTML，添加嵌套容器或在容器上设置固定高度（see my flexbox answer on this page）。

#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属性设置自动生成（隐式）行的高度。这里的每行高50px。
grid-gap属性是grid-column-gap和grid-row-gap的简写。此规则在网格项之间设置10px间隙。（它不适用于物品和容器之间的区域。）

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

正如你所看到的那样，大盒子在列之间被打破了。

正如other post you referenced中所述，由于您的子元素（.block）已经固定高度，因此我们可以确定容器的高度（.wrapper）。

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

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

或者，如果您可以添加容器，则布局很容易。只需创建四个嵌套的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>

否则，请参阅此帖子了解更多详情和其他选项：

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

Answer 3

使用flexbox和flex-direction：row。

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

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

3 个答案:

jsFiddle