多列布局从相同高度开始

Question

如您所见，第二个元素比其他三个元素低35px。原因是，每个元素都有margin-bottom: 35px;但为什么它会附加到顶部？如果我添加display: inline-block我可以阻止它，但是在第二个之后列会中断...

我该如何解决？

#items {
  display: block;
  column-width: 3rem;
  column-gap: .35rem;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
#items.show {
  opacity: 1;
  visibility: visible;
}
#items .item {
  width: 100%;
  margin: 0 0 .35rem;
  padding: 0;
  display: inline-block;
  column-break-inside: avoid;
  break-inside: avoid-column;
}

<div class='show' id='items'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

此外，我只在Chrome中遇到此问题; Firefox和Microsoft Edge运行良好。

Answer 1

使用Display：inline-block，尝试margin-right：-4px。

这是一个已知的显示内联块问题

https://css-tricks.com/fighting-the-space-between-inline-block-elements/