html - 从同一高度开始的多列布局

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。

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

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