Q&A
「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
###jQueryAutoHeight.jsを用いて
jQueryAutoHeight.jsを用いて
liの高さを揃えたいが、うまく実装出来ない。
###記述例
html
1 <section class="team-member top"> 2 <h3>GK</h3> 3 <ul class="list"> 4 <li> 5 <figure> 6 <img src="img.jpg" alt=""> 7 <figcaption><a href="#inline-wrap01"> 8 NO.01</figcaption> 9 </figure> 10 <p>テキストテキストテキストテキストテキスト</p> 11 </li> 12 <li> 13 <figure><img src="img02.jpg" alt=""> 14 <figcaption><a href="#inline-wrap02"> 15 NO.02</figcaption> 16 </figure> 17 <p>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキスト</p> 18 </li> 19 </ul> 20 </section> 21
javascript
1jQuery(function($){ 2 $(".list li").autoHeight(); 3});
###補足情報
liの数が増えた際は、
一行二列で高さを揃えたい。
javascript
1jQuery(function($){ 2 $(".list li").autoHeight({column:2}); 3});
対象要素がinlineになっているとか、親要素のHeightの指定がないとか、いろいろ考えられますがCSSも併記していただけませんでしょうか。
link,javascript,css 全てを修正記述しようとして、記述ミスを見つけました。 それが、原因だったようです。
回答2件
0
以下のHTMLを作成して正しく動作することを確認しました
このHTMLサンプルを使って、動作確認の結果をお知らせください
- jQueryAutoHeight.jsのsrcは環境に合わせて修正してください
よろしくお願いします
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset=utf-8 /> 5 <title>jQueryAutoHeight.jsを用いてliの高さを揃える</title> 6 <style type="text/css"> 7 li { 8 list-style: none; 9 float: left; 10 width: 200px; 11 padding: 5px; 12 border: 1px solid #000; 13 } 14 </style> 15 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 16 <script type="text/javascript" src="jQueryAutoHeight.js"></script> 17 <script type="text/javascript"> 18 jQuery(function($){ 19 $(".list li").autoHeight({column:2}); 20 }); 21 </script> 22</head> 23<body> 24<section class="team-member top"> 25<h3>GK</h3> 26<ul class="list"> 27 <li> 28 <figure> 29 <img src="img.jpg" alt=""> 30 <figcaption><a href="#inline-wrap01"> 31 NO.01</figcaption> 32 </figure> 33 <p>テキストテキストテキストテキストテキスト</p> 34 </li> 35 <li> 36 <figure><img src="img02.jpg" alt=""> 37 <figcaption><a href="#inline-wrap02"> 38 NO.02</figcaption> 39 </figure> 40 <p>テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキスト</p> 41 </li> 42</ul> 43</section> 44</body> 45</html>
投稿2017/03/23 01:25
退会済みユーザー
総合スコア0
0
ベストアンサー
kei344さん Neko_doshiさん magicpさん
修正・回答のコメント、ありがとうございます。
##javascriptが動かなかった理由がわかりました。
jQuery読み込みの記述を間違えていたようです。
誤った記述
<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="/js/jQueryAutoHeight.js"></script>
正しい記述
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="/js/jQueryAutoHeight.js"></script>
ローカルでは確認出来ませんが、
テスト投稿して、liの高さがそろっていることを確認しました。
投稿2017/03/26 14:00
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
