如何为一行中的元素分配相同的高度？

Posted 2023-03-06

【中文标题】如何为一行中的元素分配相同的高度？

【英文标题】：How can I assign elements in a row the same height?

【发布时间】：2017-07-11 15:17:41

【问题描述】：

我遇到了一点引导问题。 我打印了一些有角度的元素（ng 重复），容器调整它们的高度以适应图像的高度..

View of my recipes

代码：

<div class="row text-center">
    <div class="col-lg-3 col-md-12 col-sm-12" ng-repeat="recipe in purchasedRecipes">
        <a href="recipe.PdfUrl" target="blank">
            <div class="thumbnail">
                <img src="recipe.ImgUrl" />
                <div class="caption">
                    <h3>recipe.RecipeName</h3>
                </div>
            </div>
        </a>
    </div>
</div>

宽度很容易用 bootstrap 分配 (class="col-lg-3 col-md-12 col-sm-12") 我怎样才能分配一个固定的响应高度，以便我的食谱是相同大小的行？

感谢您的帮助:)

【问题讨论】：

display:flex 或 display:table 很容易做到。 Bootsrap 有一个弹性版本，您可以使用：v4-alpha.getbootstrap.com/utilities/flexbox 链接库 v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css 并在容器上添加（弹性）类。 - 您的示例太短，无法显示您的问题，否则我将复制/粘贴以从中制作示例

【参考方案1】：

见here。前三名是：

ma​​tchHeight.js

matchHeight.js Docs matchHeight.js GitHub

使用表格

他们给出的例子：

@media only screen and (min-width : 768px) 
    .is-table-row 
        display: table;
    
    .is-table-row [class*="col-"] 
        float: none;
        display: table-cell;
        vertical-align: top;
    

巨大的负边距和正边距

他们的代码：

.row.match-my-cols 
    overflow: hidden; 


.row.match-my-cols [class*="col-"]
    margin-bottom: -99999px;
    padding-bottom: 99999px;

【讨论】：

哇，除了选择器[]，我已经很久（10-12 年？）没见过这个 CSS 技巧了，我以为现在没有人会使用它......而且 IE8 踢掉了那些平均水平技巧:)