我的每一列都有不同的高度.如何使用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{
}
.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
最佳答案
一种可能性是使用flex列,并根据它们对模3的位置排序.此外,插入伪元素以强制换行
.parent {
display: flex;
flex-flow: column;
flex-wrap: wrap;
height: 500px;
width: 300px;
}
.child {
margin: 5px;
width: 100px;
background-color: lightgreen;
transition: padding 1s;
}
.child:hover {
padding: 30px 0px;
}
.child:nth-child(3n + 1) {
order: 1;
}
.child:nth-child(3n + 2) {
order: 10;
}
.child:nth-child(3n) {
order: 20;
}
.parent:before,.parent:after {
content: "";
width: 0px;
height: 999px;
}
.parent:before {
order: 5;
}
.parent:after {
order: 15;
}<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>