我的页面充满了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>
您在子元素上具有固定的高度(.block
)。根据该信息,我们可以推断容器的高度(#wrapper
)。
通过知道容器的高度,可以将CSS Flexbox与flex-direction: column
和flex-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>
这里有个解释,为什么除非容器上有固定的高度/宽度,否则柔性物品不能包装:https://stackoverflow.com/a/43897663/3597276
要使布局与flexbox配合使用,您需要使用嵌套容器或知道容器的高度(see my other answer on this page)。网格并非如此。代码结构非常简单。
#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>
注意:
grip-gap
是grid-row-gap
和grid-column-gap
的简写。(spec reference)CSS网格浏览器支持