我如何垂直对齐具有不同高度的网格元素？ [重复]

Posted 2023-01-31

此问题已经在这里有了答案：

CSS-only masonry layout（2个答案）

关闭上个月。

我的问题是我的网格元素都具有不同的高度长度，这在下面的行下方留有多余的空间。它看起来确实像我希望在移动设备上显示的样子，但是在台式机上，我似乎无法将图像向上推到有多余空间的位置。

我已经尝试过使用display: flex; align-items: flex-start;，但仍然留有多余的间距。

查看我的网站以查看：https://eylenkim.github.io/ArtByEylen/Portfolio/portfolio.html

这是我的代码：

示例html

<div class="grid">
    <div class="item">
        <div class="item-content">
            <img src="myimage1.JPG" style="height:auto; width: 100%">
        </div>
        <div class="item-content">
            <img src="myimage2.JPG" style="height:auto; width: 100%">
        </div>
    </div>
</div>

CSS

.grid 
  position: relative;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  align-items: flex-start;
  margin: 0 5% 0 5%;


.item 
  /*position: absolute; */
  max-width: 400px;
  width:400%;
  height: auto;
  z-index: 1;
  transition: transform 0.6s ease;
  cursor: pointer;
  margin: 5px;
  overflow: hidden;


img 
  max-width:400px !important;
       -o-object-fit: cover;
  object-fit: cover;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;


.item img:hover 
  -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);


.item-content 
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;

答案

我最近使用了非常依赖flex box的前端接口。但是，我需要各种控件具有完全相同的高度的内容。因此，我选择使用一个网格，该网格也具有响应性，此外还具有网格间隙（因此您不必在图像中添加填充）

另一答案

我建议您必须在此使用flexbox。也许尝试在.grid类上使用以下代码行：

另一答案

我建议您必须在此使用flexbox。也许尝试在.grid类上使用以下代码行：