フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック

<ul class="記事">
    <li class="js-equalheight">
      <p>
      顧客の利益を第一に考えるブローカー。
      顧客に専門的な取引ツールを提供する顧客の利益を最優先するブローカー。
      顧客に専門的な取引ツールを提供する顧客の利益を最優先するブローカー。
      顧客に専門的な取引ツールを提供する 顧客の利益を第一に考え、顧客に専門的な取引ツールを提供するブローカー</p>
    </li>
    <li class="js-equalheight">
      <p>顧客の利益を第一に考え、顧客に専門的な取引ツールを提供するブローカー。顧客の利益を第一に考え、顧客に専門的な取引ツールを提供するブローカー。</p>
    </li>
    <li class="js-equalheight">
      <p>顧客の利益を第一に考えるブローカー</p>
    </li>
  </ul>

。記事{
  オーバーフロー: 非表示;
}

.記事>li{
  フロート: 左;
  マージン: 0 10px -9999px 0;
  パディング下部: 9999px;
  背景: #4577dc;
  幅: 200ピクセル;
  色: #fff;
}

.記事>li>p{
  パディング: 10px;
}

jQuery(ドキュメント).ready(関数() {
  等しい高さ();
});

jQuery(ウィンドウ).resize(関数() {
  jQuery('.js-equalheight').css('height','auto');
  等しい高さ();
});

関数equalheight() {
  var heights = jQuery(".js-equalheight").map(function() {
    jQuery(this).height() を返します。
  }）。得る（）、

  maxHeight = Math.max.apply(null、高さ);

  jQuery(".js-equalheight").height(maxHeight);
}