我有一个充满 block 的页面,上面堆满了 display: inline-block
。我想放大四倍或两倍,所以我使用 float: left
或 right
来放置其他 block 。
我的问题是如果我有一个五元素行,我怎么能把一个更大的元素放在中间呢? (如 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>
最佳答案
Flexbox 解决方案
您的子元素 (.block
) 具有固定高度。根据该信息,我们可以推断出容器的高度 (#wrapper
)。
通过了解容器的高度,您的布局可以使用 CSS Flexbox 实现使用 flex-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
关于css - 使一个 div 跨越网格中的两行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57331091/