複数カラムの高さをそろえるの別バージョンです。
カラム（ul）の中の各段落（li）の高さをそれぞれそれぞれそろえています。
今回は、横に3カラムなのでその中の段落で高さが最も高い段落にそろえています。
<!--css-->
div {
border-top: 1px solid #333;
overflow: hidden;
}
ul {
border: 1px solid #333;
display: block;
float: left;
width: 26%;
padding: 1em;
margin: 1%;
}
li {
border: 1px dotted #333;
list-style: none;
margin: 0 0 0.5em;
}
<!--javascript-->
$(function(){
var res = function(){
$('ul li').removeAttr('style');
}
var mh_fn = function(ind00,ind01,ind02,ind03,ind04,ind05,ind06,ind07,ind08){
var mh = Math.max(
$('div:eq('+ind00+') ul:eq('+ind01+') li:eq('+ind02+')').height(),
$('div:eq('+ind03+') ul:eq('+ind04+') li:eq('+ind05+')').height(),
$('div:eq('+ind06+') ul:eq('+ind07+') li:eq('+ind08+')').height()
);
$('div:eq('+ind00+') ul:eq('+ind01+') li:eq('+ind02+'), div:eq('+ind03+') ul:eq('+ind04+') li:eq('+ind05+'), div:eq('+ind06+') ul:eq('+ind07+') li:eq('+ind08+')').height(mh);
}
$(window).on('load resize',function(){
res();
mh_fn(0,0,0,0,1,0,0,2,0);/*1ページ(div)目1段目1行目*/
mh_fn(0,0,1,0,1,1,0,2,1);
mh_fn(0,0,2,0,1,2,0,2,2);
mh_fn(0,0,3,0,1,3,0,2,3);
mh_fn(0,0,4,0,1,4,0,2,4);
mh_fn(0,3,0,0,4,0,0,5,0);/*1ページ(div)目2段目1行目*/
mh_fn(0,3,1,0,4,1,0,5,1);
mh_fn(0,3,2,0,4,2,0,5,2);
mh_fn(0,3,3,0,4,3,0,5,3);
mh_fn(0,3,4,0,4,4,0,5,4);
mh_fn(0,6,0,0,7,0,0,8,0);/*1ページ(div)目3段目1行目*/
mh_fn(0,6,1,0,7,1,0,8,1);
mh_fn(0,6,2,0,7,2,0,8,2);
mh_fn(0,6,3,0,7,3,0,8,3);
mh_fn(0,6,4,0,7,4,0,8,4);
mh_fn(1,0,0,1,1,0,1,2,0);/*2ページ(div)目1段目1行目*/
mh_fn(1,0,1,1,1,1,1,2,1);
mh_fn(1,0,2,1,1,2,1,2,2);
mh_fn(1,0,3,1,1,3,1,2,3);
mh_fn(1,0,4,1,1,4,1,2,4);
mh_fn(1,3,0,1,4,0,1,5,0);/*2ページ(div)目2段目1行目*/
mh_fn(1,3,1,1,4,1,1,5,1);
mh_fn(1,3,2,1,4,2,1,5,2);
mh_fn(1,3,3,1,4,3,1,5,3);
mh_fn(1,3,4,1,4,4,1,5,4);
mh_fn(1,6,0,1,7,0,1,8,0);/*2ページ(div)目3段目1行目*/
mh_fn(1,6,1,1,7,1,1,8,1);
mh_fn(1,6,2,1,7,2,1,8,2);
mh_fn(1,6,3,1,7,3,1,8,3);
mh_fn(1,6,4,1,7,4,1,8,4);
mh_fn(2,0,0,2,1,0,2,2,0);/*3ページ(div)目1段目1行目*/
mh_fn(2,0,1,2,1,1,2,2,1);
mh_fn(2,0,2,2,1,2,2,2,2);
mh_fn(2,0,3,2,1,3,2,2,3);
mh_fn(2,0,4,2,1,4,2,2,4);
mh_fn(2,3,0,2,4,0,2,5,0);/*3ページ(div)目2段目1行目*/
mh_fn(2,3,1,2,4,1,2,5,1);
mh_fn(2,3,2,2,4,2,2,5,2);
mh_fn(2,3,3,2,4,3,2,5,3);
mh_fn(2,3,4,2,4,4,2,5,4);
mh_fn(2,6,0,2,7,0,2,8,0);/*3ページ(div)目3段目1行目*/
mh_fn(2,6,1,2,7,1,2,8,1);
mh_fn(2,6,2,2,7,2,2,8,2);
mh_fn(2,6,3,2,7,3,2,8,3);
mh_fn(2,6,4,2,7,4,2,8,4);
});
});
See the Pen OwyGbL by nwstcode (@nwst) on CodePen.
