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分区的高度应为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的最干净的解决方案。它将平衡所有高度，而不需要＆＃34; tablify＆＃34;列。

＆＃13;

.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
  }

＆＃13;

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

＆＃13;

多行，不同的高度 - 均衡每一行（JS）

1 个答案: