Question

我已经构建了一个包含多行的flexbox网格布局，但由于这些行的子节点是绝对定位的，因此这些行不会累积任何高度，因此它们会相互重叠。

我可以想到一些hacky解决方法，但我不确定最佳解决方案是什么。

相关CSS：

.events-row {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1280px;
}

.card {
  flex-basis: 31.3%;
  position: relative;
  padding: 15px 0;
}

.card .card-flip-cont {
  padding: 15px;
}

.card .card-flip-cont .card-front,
.card .card-flip-cont .card-back {
  position: absolute;
}

演示：http://codepen.io/ourcore/pen/oBeXzq

Answer 1

position: absolute;将元素从流中取出，无法将父元素自动延伸到绝对子元素的高度。您需要在卡片上明确设置一些高度。

如果您想要卡片的比例，我建议您在padding-bottom: XX%;课程中使用.card，但是如果卡片中的内容更长，您必须采取一些策略比你指定的高度。带有％值的padding-bottom使用父（您的行）的width作为基值。

具有绝对子项的网格行上没有高度

1 个答案: