jquery.heightLine.js
こちらのライブラリを使っています。
赤文字のテキスト(<p class="name">)の高さを揃えたいのですが、
現状、高さが一番高い物に合わせて全てのテキストの高さが揃ってしまいます。
このテキストの高さを、横一列ごとに高さを揃えられるようにしたいです。
PC表示は4カラムごとに横一列高さを揃え、
SP表示は2カラムになった場合も横1列ごとに高さを揃えられるようにしたいのですが、
なにか良い方法が御座いましたら教えて頂きたいです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5<style type="text/css"> 6body { 7 position: relative; 8 max-width: 954px; 9 margin: 0 auto; 10 padding: 0 13px; 11} 12.module .row .body .col_wrap { 13margin: 0 -1.525%; 14} 15.module .row .body li { 16float: left; 17width: 21.94%; 18padding: 0 1.525%; 19} 20.module .row .body a { 21display: block; 22padding-bottom: 2em; 23} 24.module .row .body .thumb { 25margin-bottom: 1em; 26} 27.module .row .body .thumb img { 28 width: 100%; 29} 30.zoom_effect .thumb { 31position: relative; 32z-index: 10; 33overflow: hidden; 34width: 100%; 35border: 1px solid transparent; 36} 37.module .row .name { 38margin-bottom: 0.3em; 39color: #005e8c; 40font-weight: bold; 41color: red; 42} 43.clearfix:after { 44 display: block; 45 clear: both; 46 content: ''; 47} 48@media only screen and (max-width: 767px){ 49.module .row .body li { 50 width: 46.42%; 51} 52} 53</style> 54</head> 55<body> 56 <section class="module"> 57<div class="row"> 58<div class="body"> 59<ul class="col_wrap clearfix"> 60<li><a href="" class="zoom_effect"> 61<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 62<p class="name">ダミーです</p> 63<p class="description">ダミーですダミーですダミーですダミーですダミーですダミーです</p> 64</a></li> 65<li><a href="" class="zoom_effect"> 66<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 67<p class="name">ダミーですダミーです</p> 68<p class="description">ダミーですダミーですダミーです</p> 69</a></li> 70<li><a href="" class="zoom_effect"> 71<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 72<p class="name">ダミーですダミーです<br>ダミーです</p> 73<p class="description">ダミーですダミーですダミーですダミーですダミーです</p> 74</a></li> 75<li><a href="" class="zoom_effect"> 76<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 77<p class="name">ダミーです</p> 78<p class="description">ダミーですダミーですダミーですダミーです</p> 79</a></li> 80<li><a href="" class="zoom_effect"> 81<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 82<p class="name">ダミーですダミーです</p> 83<p class="description">ダミーですダミーですダミーですダミーですダミーです</p> 84</a></li> 85<li><a href="" class="zoom_effect"> 86<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 87<p class="name">ダミーですダミーです</p> 88<p class="description">ダミーですダミーですダミーですダミーですダミーです</p> 89</a></li> 90<li><a href="" class="zoom_effect"> 91<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 92<p class="name">ダミーですダミーです</p> 93<p class="description">ダミーですダミーですダミーです</p> 94</a></li> 95<li><a href="" class="zoom_effect"> 96<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 97<p class="name">ダミーですダミーです</p> 98<p class="description">ダミーですダミーですダミーですダミーですダミーですダミーです</p> 99</a></li> 100<li><a href="" class="zoom_effect"> 101<div class="thumb"><img src="https://placehold.jp/260x156.png" alt=""></div> 102<p class="name">ダミーですダミーです</p> 103<p class="description">ダミーですダミーですダミーですダミーですダミーですダミーです</p> 104</a></li> 105</ul> 106</div> 107</div> 108</section> 109<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 110<script src="http://blog.webcreativepark.net/sample/jQuery/11/jquery.heightLine.js"></script> 111 112<script> 113$(window).on("load", function() { 114 $('.module').each(function() { 115 $(this).find('.body .name').heightLine({ fontSizeCheck: true }); 116 $(this).find('.body a').heightLine({ fontSizeCheck: true }); 117 }); 118}); 119</script> 120</body> 121</html>

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/02 16:02
2017/03/02 16:18