使div在网格中跨越两行

时间:2017-03-22 08:38:43

标签: css css3 flexbox grid-layout css-grid

我的页面上堆满了display: inline-block。我想要大四到两倍,所以我使用float: leftright来放置其他块。

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

以下是我希望从Expected

上方的代码段中获得的内容

2 个答案:

答案 0 :(得分:10)

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

通过了解容器的高度,可以使用CSS Flexboxflex-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

答案 1 :(得分:6)

要使您的布局与flexbox一起使用,您需要使用嵌套容器知道容器的高度see my other answer on this page)。 Grid不是这样。代码结构非常简单。

#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

注意:

  1. 建立块级网格容器。 (spec reference
  2. 指示网格创建一个90像素宽的列,并重复该过程5次。 (spec reference
  3. 将隐式创建网格行 (即,根据需要自动创建)。每个隐含行的高度应为50px。 (spec reference
  4. 网格项目周围的排水沟。 grip-gapgrid-row-gapgrid-column-gap的简写。(spec reference
  5. 指示大项目从第1行到第3行跨越。(双行网格中有三行行。)(spec reference)。
  6. 指示大项目从网格列行2到3跨越。(五列网格中有六个列线。)(spec reference
  7. 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