<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://web.runland.co.jp/wp-content/uploads/2019/12/jquery.matchHeight.js"></script>
<div class="example-box-wp">
<div class="example-box matchHeight">
ボックス1
</div>
<div class="example-box matchHeight">
ボックス2<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
<div class="example-box matchHeight">
ボックス3
</div>
<div class="example-box matchHeight">
ボックス4
</div>
<div class="example-box matchHeight">
ボックス5
</div>
<div class="example-box matchHeight">
ボックス6<br>
テキストテキストテキストテキストテキストテキストテキスト
</div>
<div class="example-box matchHeight">
ボックス7
</div>
<div class="example-box matchHeight">
ボックス8<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
</div>
.example-box-wp{
width:100%;
}
.example-box{
width:25%;
float:left;
}
.example-box:nth-child(1){
background:red;
}
.example-box:nth-child(2){
background:yellow;
}
.example-box:nth-child(3){
background:green;
}
.example-box:nth-child(4){
background:blue;
}
.example-box:nth-child(5){
background:pink;
}
.example-box:nth-child(6){
background:orange;
}
.example-box:nth-child(7){
background:purple;
}
.example-box:nth-child(8){
background:gray;
}
$(function(){
$('.matchHeight').matchHeight();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.