html-如何针对不同的高度元素水平而不是垂直排列CSS列？

概述我的每一列都有不同的高度.如何使用CSS将列排序为水平而不是垂直？同样,将鼠标悬停在每个项目上时,高度会稍微增加一点,而不会重叠在下面的项目上..parent{ /*display: flex; flex-flow: column wrap; height:600px; */ column-count: 3; col

我的每一列都有不同的高度.如何使用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 >    <div  >1</div>    <div  >2</div>    <div   >3</div>    <div   >4</div>    <div   >5</div>    <div   >6</div>    <div   >7</div>    <div   >8</div>    <div   >9</div></div>

当前订单是

147258369

但是我需要

123456789

最佳答案一种可能性是使用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 >  <div  >1</div>  <div  >2</div>  <div  >3</div>  <div  >4</div>  <div  >5</div>  <div  >6</div>  <div  >7</div>  <div  >8</div>  <div  >9</div></div>

总结

以上是内存溢出为你收集整理的html-如何针对不同的高度元素水平而不是垂直排列CSS列？ 全部内容，希望文章能够帮你解决html-如何针对不同的高度元素水平而不是垂直排列CSS列？ 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。