保持多个元素高度相同并垂直对齐

Question

我正在努力应对我正在从事的项目中的挑战。

JSFiddle example

我希望所有按钮的高度相同。 在大屏幕上它们都很好。 但是当我开始按比例缩小时，它们开始变得不同的高度。 这是预期的结果。

但是在这个页面上拉弦的人希望所有按钮都具有相同的高度。 当一个文本进入下一行并使按钮变大时，每个按钮的高度都相同。

这适用于视口的所有宽度。

我希望你能帮助我应对这个挑战。 有关更多信息，我会尽快更新问题。

附言。我不想为此使用 CSS3，因为它希望尽可能保持向后兼容性。

因为我必须在这里添加代码，这是我的html的情况。

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
            <a href="#" class="button button-primary bpanelbutton">This is a short text</a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
            <a href="#" class="button button-primary bpanelbutton">This is a long text like this</a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
            <a href="#" class="button button-primary bpanelbutton">This is a long text that is even longer tha the previous button</a>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
            <a href="#" class="button button-primary bpanelbutton">This is a short text</a>
        </div>
    </div>

</div>

Answer 1

Flexbox 可能是您更简单的解决方案，我发现一篇文章试图解决您遇到的问题。

查看这篇文章：http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

---

代码：

.row {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.button-primary {
    background-color: #005f96;
    color: white;
    font-size: 20px;
    margin: 2%;
    display:flex-item;
    width: 21%;
}

---

演示：

https://jsfiddle.net/x2cqqcz7/

---

额外：

我已经删除了按钮周围的 div，而且您可能会使用媒体查询。

Answer 2

这是我为类似项目编写的基本 jQuery 代码：

 var eqheight = 0; 
 $('.col-eqheight-sm').each(function() {
     if( $(this).outerHeight() > eqheight) {
        eqheight = $(this).height();
     }
  });
  $('.col-eqheight-sm').height(eqheight);

它遍历每个孩子并相应地更新高度。

P.S 如果您只想针对特定分辨率工作，建议将其包装在视口宽度检查器中。此外，如果您希望在每次视口更改时更新它，请添加一个窗口调整大小侦听器。