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

Question

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

JSFiddle example

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

但是操纵此页面的人希望所有按钮的高度都相同。当一个文本转到下一行并使按钮变大时，每个按钮的高度大多相同。

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

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

PS。我不想为此使用 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);

它循环遍历每个 child 并相应地更新高度。

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

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

Keep multiple elements same hight and verticalu aligned

html

css

elements

twitter-bootstrap-3