我的每个列的高度都不同。我该如何使用CSS将我的列水平而不是垂直排序?同时,在悬停每个项目时,高度会稍微增加,而不会重叠在下面的项目。
.parent{
/*display: flex;
flex-flow: column wrap;
height:600px; */
column-count: 3;
column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
.child{
background-color:#eee;
margin-bottom:2px;
}
.child:hover{
min-height:300px;
}
<div class="parent">
<div class="child" style="height:100px">1</div>
<div class="child" style="height:120px">2</div>
<div class="child" style="height:200px">3</div>
<div class="child" style="height:100px">4</div>
<div class="child" style="height:50px">5</div>
<div class="child" style="height:100px">6</div>
<div class="child" style="height:100px">7</div>
<div class="child" style="height:100px">8</div>
<div class="child" style="height:100px">9</div>
</div>
当前订单为
147
258
369
但是我需要
123
456
789