Divの高さを設定するdiv内の最高のコンテンツに基づいて動的に設定

Question

複数のdivが連続しています。 div内の最高のコンテンツに基づいて各divに動的に高さを設定したいと思います。高さはすべてのdivに等しいはずです。 javascript/jqueryでこれを解決するのを手伝ってもらえますか？以下は

はコードです：

<div class="table-cellprop"> 
    <div class="bottom-pane"> 
     <div class="content-info"> 
     <p>some imp text </p> 
     <h3>title </h3> 
     <div class="text-left"> some text with info 
     <h4>title 2 </h4> 
     <ul> 
      <li class="bm-list"> li one </li> 
      <li class="cm-list"> two </li> 
      <li class="mm-list"> three </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 


<div class="table-cellprop card-btm"> 
    <div class="bottom-pane"> 

    <div class="content-info"> TextTextTextTextTextTextTextTextTextTextTextText </div> 

    </div> 

</div> 



<div class="table-cellprop card-btm"> 
    <div class="bottom-pane"> 

    <div class="content-info"> TextTextTextText </div> 

    </div> 

</div> 

Answer 1

あなたは実際にはJavaScriptを必要としません。あなたはflexboxを使うことができます。

.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.table-cellprop { 
 
    flex: 1; 
 
    overflow: auto; 
 
} 
 

 
.table-cellprop:nth-child(1) { 
 
    background-color: #b9f6ca; 
 
} 
 
.table-cellprop:nth-child(2) { 
 
    background-color: #84ffff; 
 
} 
 
.table-cellprop:nth-child(3) { 
 
    background-color: #b388ff; 
 
}

<div class="flex-container"> 
 
<div class="table-cellprop"> 
 
    <div class="bottom-pane"> 
 
     <div class="content-info"> 
 
     <p>some imp text </p> 
 
     <h3>title </h3> 
 
     <div class="text-left"> some text with info 
 
     <h4>title 2 </h4> 
 
     <ul> 
 
      <li class="bm-list"> li one </li> 
 
      <li class="cm-list"> two </li> 
 
      <li class="mm-list"> three </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="table-cellprop card-btm"> 
 
    <div class="bottom-pane"> 
 

 
    <div class="content-info"> TextTextTextTextTextTextTextTextTextTextTextText </div> 
 

 
    </div> 
 

 
</div> 
 

 

 

 
<div class="table-cellprop card-btm"> 
 
    <div class="bottom-pane"> 
 

 
    <div class="content-info"> TextTextTextText </div> 
 

 
    </div> 
 

 
</div> 
 
</div>