css - flex布局如果item的高度不定，怎么让下一行自动填充上一行的空白呢
本文介绍了css - flex布局如果item的高度不定，怎么让下一行自动填充上一行的空白呢的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如图:第一行中间的item高度不定，第二行的第一个item 我想顶上去
解决方案
我想你应该是要这个效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box{
height: 123px;
padding: 1em;
margin-top: 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #000;
background: #909090;
}
.spe{
height: 225px;
}
.box-wrapper{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari 和 Chrome */
column-count:4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
</style>
<body>
<div class="box-wrapper">
<div style="margin-top:0px" class="box"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box spe"></div>
<div class="box spe"></div>
</div>
</body>
</html>
这篇关于css - flex布局如果item的高度不定，怎么让下一行自动填充上一行的空白呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
