javascript - 多行，不同高度 - 使每一行均等(JS)

Question

我有不同的行，其中有 4 个 div。看看下面的片段:

<div class="w-row">
    <div class="w-col w-col-3">
        <!-- lets assume this image has a height of 30px -->
        <img src="myimage.png">
    </div>
    <div class="w-col w-col-3">
        <!-- lets assume this image has a height of 40px -->
        <img src="myimage.png">
    </div>
    <div class="w-col w-col-3">
        <!-- lets assume this image has a height of 20px -->
        <img src="myimage.png">
    </div>
    <div class="w-col w-col-3">
        <!-- lets assume this image has a height of 60px -->
        <img src="myimage.png">
    </div>
</div>

<div class="w-row">
    <div class="w-col w-col-3">
        <!-- lets assume this image has a height of 20px -->
        <img src="myimage.png">
    </div>
    <div class="w-col w-col-3">
        <!-- lets assume this image has a height of 40px -->
        <img src="myimage.png">
    </div>
    <div class="w-col w-col-3">
        <!-- lets assume this image has a height of 20px -->
        <img src="myimage.png">
    </div>
    <div class="w-col w-col-3">
        <!-- lets assume this image has a height of 30px -->
        <img src="myimage.png">
    </div>
</div>

我想对每一行进行不同的均衡，这样在我的第一个 w-row 中，包含 w-col w-col3 类的容器的高度应该为其中元素的最大高度。因此，在我的示例中，w 行中的前 4 个 div 每个的高度应为 60px。

第二个 4 个 div 的高度应为 40px

通常我为此使用均衡器功能，但内容是动态呈现的，所以有 n 元素和行，所以我不能只给它们编号，因为我必须使用均衡器是这样的:

equalizeHeight("w-row w-col-3") // this would lead to having all columns to have the highest image-height of all elements on the page

如果我这样使用它:

equalizeHeight("w-row w-row1"), I'd have to call this function `n` times, without knowing how many times it has to be called. 

有人有想法/解决方案吗？

//更新1

链接到 CSS 文件 webflow.css

Answer 1

最干净的解决方案是使用flex-box。它将均衡所有高度，而无需“制表”列。

.flex-row{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }


.flex-col{
   padding:5px;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
  }

 p{
   background-color:black;
   color:#fafafa;
   padding:5px
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row flex-row">
  <div class="col-xs-3 flex-col">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
    <div class="col-xs-3 flex-col">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
    </div>
    <div class="col-xs-3 flex-col">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </div>
    <div class="col-xs-3 flex-col">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui offi</p>
    </div>
  </div>