使 div 跨越网格中的两行 [英] Make a div span two rows in a grid

问题描述

我有一个充满块的页面，这些块堆满了 display: inline-block.我想放大四到两倍，所以我使用 float: left 或 right 来放置其他块.

我的问题是，如果我有一个五元素行，我怎么能在它的中间放置一个更大的元素?(因为float 把它自然地放在一边).

这是一个示例片段:

#wrapper{宽度:516px；}.堵塞{显示:内联块；宽度:90px；高度:50px；边距:5px；背景颜色:红色；}.大{高度:110px；}

<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="块更大"></div><div class="block"></div><div class="block"></div>

这是我想从上面的片段中获得的内容

解决方案

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

通过知道容器的高度，您的布局可以使用 CSS Flexbox 带有 flex-direction: column 和 flex-wrap: wrap.

容器上的一个固定高度作为断点，告诉 flex 项目在哪里换行.

#wrapper {显示:弹性；弹性方向:列；flex-wrap: 包裹;高度:120px；宽度:516px；}.堵塞 {宽度:90px；弹性:0 0 50px；边距:5px；背景颜色:红色；}.更大的{弹性基础:110px；}

<div class="block"></div><div class="block"></div><div class="块更大"></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>

jsFiddle

这里解释了为什么除非容器上有固定的高度/宽度，否则 flex 项目不能换行:https://stackoverflow.com/a/43897663/3597276

I have a page full of blocks which pile up with display: inline-block. I want to make some four or two times bigger, so I used float: left or right to put other blocks around.

My problem is if I have a five-element row, how could I put a bigger element in the middle of it? (as float put it naturally on the side).

Here's an example snippet:

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

Here's what I would like to have from the snippet above

解决方案

You have fixed heights on your child elements (.block). Based on that information, we can extrapolate the height of the container (#wrapper).

By knowing the height of the container, your layout can be achieved using CSS Flexbox with flex-direction: column and flex-wrap: wrap.

A fixed height on the container serves as a breakpoint, telling flex items where to 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

Here's an explanation why flex items can't wrap unless there's a fixed height/width on the container: https://stackoverflow.com/a/43897663/3597276

这篇关于使 div 跨越网格中的两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！