html - 如何使两个 div 具有相同的高度，其中一个必须保持正方形纵横比？

Question

我正在创建响应式图像网格。每行有两个图像 - 一个矩形，一个正方形 - 每行的布局都是相反的(square rectangle -> rectangle 正方形，等等)。

目前，我正在使用 height: 0; padding-bottom: 100% 让我的方形 div 保持它的比例，矩形 div 得到 height: 100%;填充底部:0;。它工作得很好，直到画廊中的最后一张图片是一个单独一行的矩形 div。 height: 100%; 不再有任何可用的高度，所以它最终完全没有高度。

我在这个 CodePen 中重现了我的问题:https://codepen.io/Dalen_K/pen/GRvdEjp

如果它旁边有一个正方形(最好没有 JS)，我如何确保最后一个 div 保持相同的高度？网格会比 flexbox 更好吗？如果是这样，我将如何着手去做？

提前致谢!

Answer 1

将此用于 .image-large，它将被修复:

&.image-large {
    height: 0;
    padding-bottom: calc(50% - 12px);
  }

原因是列高是根据内容高度或同一行中最高列的大小决定的。 (我的意思是该列所在的可见行，而不是 row 标记)。由于您的 col-4 列的内容具有高度(由填充提供)，因此另一个列会自动与它相同。然而，在最后一行，该列没有可继承的引用高度，这就是为什么其中的图像不能超过 50px 高度(设置为最小值)的原因。我所做的是以类似于您为较小图像赋予高度的方式为大列中的图像赋予高度。 (由于列之间有 24 像素的间隙，所以有额外的 12 像素，这就是我减去它的原因)