CSS 响应式等高列，每个 div 下的按钮正确包裹

Question

你好！我知道这对开发人员来说是常见/反复出现的事情。一些本该如此简单却从未如此简单的事情。:(我环顾四周并找到了一些解决方案，但没有任何解决方案可以满足我的特定需求。如果您查看所附图片，您将看到我正在尝试完成的工作。在全宽模式（可能是桌面）下，两个 div在每一列中，每个 div 下都有一个按钮（当然，这些按钮将被设置为样式 div，但为了清楚起见，我将它们称为按钮）。按钮上方的两个 div 必须等高，即使它们不包含相同的内容。在移动设备上查看时，div/button 对应该如图像底部所示环绕 - 以便正确的按钮与其 div 保持一致。

任何帮助将不胜感激！

Answer 1

如果你不介意 JavaScript 方法，类似这样的方法可以工作：

JSFiddle

<div class="outer">
    <div class="inner">Some content.</div>
    <button>Button</button>
</div>
<div class="outer">
    <div class="inner">
        This div has more content. This div has more content. This div has more content.
    </div>
    <button>Button</button>
</div>

div.outer {
    margin-bottom: 3px;
    display: inline-block;
    vertical-align: top;
}

div.outer, button { width: 80px; }

div.inner { background-color: yellow; }

@media (max-width: 400px) {
  div.outer {
      display: block;
  }
}

var inners = document.getElementsByClassName("inner");
var maxHeight = 0;
for (var i = 0; i < inners.length; i++) {
    if (inners[i].offsetHeight > maxHeight)
        maxHeight = inners[i].offsetHeight;
}
for (var i = 0; i < inners.length; i++)
    inners[i].style.height = maxHeight + 'px';