どのように3つの要素をjavascriptなしで同じ高さにするのですか？

Question

私は3つの列を持ち、それぞれの内部にクラスtext-containerの要素があります。 JavaScriptを使わずに、それらのすべてを高さと同じ高さにしたい。

これはコードです：

<div class="column"> 
    <!--more elements--> 

    <div class="text-container"> 
     <!--some text--> 
    </div> 
</div> 

<div class="column"> 
    <!--more elements--> 

    <div class="text-container"> 
     <!--some longer text--> 
    </div> 
</div> 

<div class="column"> 
    <!--more elements--> 

    <div class="text-container"> 
     <!--some shorter text--> 
    </div> 
</div> 

はJavaScriptを使用しなくてもtext-container同じ高さを作るための方法はありますか？フレックスボックスはこのトリックを行うことができますが、それはすべての要素がflexbox要素内にある場合です。

Answer 1

Flexboxesを試してみてください。

最初に、カラムを格納するコンテナクラスを追加します。次に、display: flex;（および必要なベンダープレフィックス）を追加してフレックスボックスにします。さらにご希望の場合は、height: 100%とoverflow: hiddenを追加してください。

列クラスでは、display: flex;を追加してFlexboxにします。次に、flex-directionをcolumnに設定して、それを成長させるためにflex: 1;を追加して縦型レイアウトを与えます。

最後に、テキストコンテナクラスにflex: 1;を追加します。

.container { 
 
    display: -webkit-flex; /* chrome, safari */ 
 
    display: -ms-flexbox; /* internet explorer */ 
 
    display: flex; 
 
    overflow: hidden; /* optional */ 
 
    height: 100%; 
 
} 
 

 
.column { 
 
    display: -webkit-flex; /* chrome, safari */ 
 
    display: -ms-flexbox; /* internet explorer*/ 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
    border: 1px solid red; 
 
} 
 

 
.column .text-container { 
 
    flex: 1; 
 
    border: 1px solid blue; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
     hello! 
 

 
     <div class="text-container"> 
 
      hello world! <br /> 
 
      hello world! <br /> 
 
      hello world! 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     hello! 
 

 
     <div class="text-container"> 
 
      hello world! <br /> 
 
      hello world! 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     hello! <br /> 
 
     hello! <br /> 
 
     hello! <br /> 
 
     hello! 
 

 
     <div class="text-container"> 
 
      hello world! 
 
     </div> 
 
    </div> 
 
</div>

による互換性の理由またはその他の理由（それはすでに2016年だが）、あなたはFlexboxes以外のものを好むだろうに、this articleまたはthis answerを見てみましょう、場合。

Answer 2

私はずっとバニラJSを行うが、ここでjQueryのソリューションですません。

$(document).ready(function() { 
 
    var maxHeight = -1; 
 
    var col = $('.text-container'); 
 
    
 
    col.each(function() { 
 
    maxHeight = Math.max(maxHeight, $(this).height()); 
 
    }); 
 

 
    col.height(maxHeight); 
 
});

.container { 
 

 
    overflow: hidden; /* optional */ 
 

 
} 
 

 
.column { 
 
    margin:2px; 
 
    float:left; 
 
    border: 1px solid red; 
 
    height:200px; 
 
    
 
} 
 

 
.column .text-container { 
 
    margin:2px; 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="column"> 
 
     <div class="text-container"> 
 
      hello world! 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="text-container"> 
 
      hello world! <br /> 
 
      hello world! 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="text-container"> 
 
      hello world! <br /> 
 
      hello world! <br /> 
 
      hello world! 
 
     </div> 
 
    </div> 
 
</div>