相关疑难解决方法(0)

使div在网格中跨越两行

我有一个装满了块的页面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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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