Css 使一个div跨越网格中的两行

我有一个满是块的页面，上面堆满了

display:inline block

。我想把它放大四到两倍，所以我使用了

float:left

或

right

来放置其他块

我的问题是如果我有一个五元素行，我怎么能把一个更大的元素放在中间呢？（如

float

将其自然放在一边）

下面是一个示例片段：

#包装器{
宽度：516px；
}
.街区{
显示：内联块；
宽度：90px；
高度：50px；
保证金：5px；
背景色：红色；
}
.更大{
高度：110px；
}

---

您的子元素（

.block

）具有固定的高度。根据这些信息，我们可以推断容器的高度（

#wrapper

）

通过了解容器的高度，可以使用with

flex-direction:column

和

flex-wrap:wrap

实现布局

容器上的固定高度用作断点，告诉flex项目包装的位置

#包装器{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：120px；
宽度：516px；
}
.街区{
宽度：90px；
flex:050px；
保证金：5px；
背景色：红色；
}
.更大{
弹性基础：110px；
}

---

要使用flexbox进行布局，您需要使用嵌套容器或知道容器的高度（）。网格则不然。代码结构非常简单

#包装器{
显示：网格；/*1*/
网格模板列：重复（590px）；/*2*/
网格自动行：50px；/*3*/
栅极间隙：10px；/*4*/
宽度：516px；
}
.更大{
网格行：1/3；/*5*/
格线柱：2/3；/*6*/
}
.街区{
背景色：红色；
}

我喜欢flex布局，所以我非常喜欢这个答案！但是如果你不知道包装高度呢？我发布了另一个答案，解决了包装高度的问题。