17

我有一页满是积木的页面display: inline-block。我想让一些大四倍或两倍大，所以我使用float: left或right放置其他块。

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

这是我想从上面的片段中得到的预期的

4

2 回答 2

15

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

通过知道容器的高度，您的布局可以使用带有和的CSS Flexbox来实现。flex-direction: columnflex-wrap: wrap

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

#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

这是一个解释为什么除非容器上有固定的高度/宽度，否则弹性项目不能包装：https ://stackoverflow.com/a/43897663/3597276

于 2017-03-29T16:31:01.577 回答
12

为了让您的布局与 flexbox 一起使用，您需要使用嵌套容器或知道容器的高度（请参阅我在此页面上的其他答案）。网格并非如此。代码结构非常简单。

#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. 建立块级网格容器。（规格参考）
  2. 指示网格创建一个 90px 宽的列，并重复该过程 5 次。（规格参考）
  3. 网格行将被隐式创建（即，根据需要自动创建）。每个隐式行的高度应为 50px。（规格参考）
  4. 网格项目周围的排水沟。grip-gap是grid-row-gap和的简写grid-column-gap。（规范参考）
  5. 指示大项目从第 1 行到第 3 行。（两行网格中有三行行。）（规范参考）。
  6. 指示大项目从网格列线 2 到 3 跨越。（五列网格中有六列线。）（规范参考）

浏览器对 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

于 2017-04-17T23:02:48.543 回答