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';

Answer 2

我对此深思熟虑，而在“现实世界”场景中实现这一点的唯一方法是使用 JS（Josh Bjelovuk 已经给你一个很好的答案）或使用重复的内容和显示表。我说“真实世界”是因为有一些实验性内容交换 CSS 属性，但它们的支持非常有限。

<div class="container">
    <div><p>This one has a little content</p></div>
    <a class="show-small" href="Javascript;">Click Here!</a>
    <div><p>What is the difference between ignorance and apathy? I don’t know, and I don’t care.</p></div>
    <a class="show-small" href="Javascript;">Click Here!</a>
</div>
<div class="container hide-small">
    <a href="Javascript;">Click Here!</a>
    <a href="Javascript;">Click Here!</a>
</div>

body { 
    margin: 0; 
    padding: 40px;
}
.container {
    display: table;
    background: rgba(0, 0, 0, 0);
    padding: 0;
    border-spacing: 10px 3px;
    border-collapse: separate;
    width: 100%;
}
div {
    background: #333;
    color: #FFF;
    width: 48%;
    margin: 0;
    display: table-cell;
}
div p {
    padding: 20px;
    margin: 0;
}
a {
    display: table-cell;
    background: #2CB32C;
    color: #FFF;
    border-radius: 5px;
    padding: 4px 0;
    text-align: center;
}
.show-small { display: none; }

@media screen and (max-width: 30em) {
    .container { display: block; }
    div > div {
        display: block;
        width: 100%;
    }
    a { border-radius: 0; }
    .show-small { display: block; }
    .hide-small { display: none; }
}

DEMO