如何让自适应高度元素的CSS列水平排列而不是垂直排列？

Question

如何让自适应高度元素的CSS列水平排列而不是垂直排列？

3

我的每个列的高度都不同。我该如何使用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

- Rajilesh Panoli

无论可用的水平空间是多少，始终会有3列吗？ - ՕլՁՅԿ

始终有3列，但高度不同，它应该像砖石布局一样工作。 - Rajilesh Panoli

3个回答

1

请检查此链接，让我知道是否有效。

https://jsfiddle.net/sreenath124/cp2vj9sh/

html

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
</div>

css

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 1fr;
}

.child {
  border: 1px solid;
  padding: 10px;
  transition: all 0.5s ease;
}
.child:hover {
  transform: scale(1.1);
}

如果您正在寻找类似的内容，请查看此链接。 https://codepen.io/andybarefoot/pen/QMeZda

https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb

- Sree Nath

谢谢你的回答。我已经检查过了，但是我无法添加悬停效果。当我悬停在一个项目上时，该项目的高度应增加。此外，其他元素应根据该项目的悬停高度进行调整。只需要高度变化，缩放在我的情况下不起作用。 - Rajilesh Panoli

0

如果你以不同的方式构建HTML，这将变得很容易:

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.child {
  /* Just to demonstrate */
  background-color: powderblue;
  margin: 1px;
}
.child:hover {
  min-height: 40px;
}

<div class="parent">
  <div class="column">
    <div class="child" style="height: 25px">1</div>
    <div class="child" style="height: 30px">4</div>
    <div class="child" style="height: 40px">7</div>
  </div>
  <div class="column">
    <div class="child" style="height: 30px">2</div>
    <div class="child" style="height: 20px">5</div>
    <div class="child" style="height: 30px">8</div>
  </div>
  <div class="column">
    <div class="child" style="height: 30px">3</div>
    <div class="child" style="height: 30px">6</div>
    <div class="child" style="height: 30px">9</div>
  </div>
</div>

- ՕլՁՅԿ

感谢@pete的回答。但是这里在1和4之间、2和5之间等处有空隙。它应该像砖石布局一样工作。我也尝试了网格布局。 - Rajilesh Panoli

编辑了我的答案，结果是否与您想要的类似？我认为它确实需要像上面那样将<div>结构化为列。 - ՕլՁՅԿ

这是一个不错的解决方案，但在我的情况下，我无法更改结构，因为它会影响我的响应能力。在移动版本中，它将变成单列，所以顺序再次会改变。调整浏览器大小后也会改变顺序。 - Rajilesh Panoli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

一种可能的方法是使用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>