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

我有不同的行，其中有4個div。看一看下面的代碼片段：多行，不同高度 - 均衡每行（JS）

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

我想diffrently均衡的每一行，使我第w-row，用類w-col w-col3容器應該得到它的元素的最大高度的高度。在我的例子中，w行中的前4個div應該每個都有60px的高度。

第二屆4個格應該得到的40像素

的高度通常我使用了一個均衡器功能，但內容是動態呈現，所以有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

來源

2016-09-07 DasSaffe

可以共享CSS？也許你可以在CSS上使用table-cell或flexbox – DaniP

@DaniP在pastebin中添加了webflow.css。 – DasSaffe

你可以使用flexbox嗎？另外，請在**你的帖子中包含**相關的** CSS **。謝謝。 – hungerstar

的乾淨的解決方案的使用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>

來源

2016-09-07 15:40:14

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

回答

相關問題