〔EC-CUBE〕float（フロート）したボックスの高さを揃えてくれるスクリプト　heightLine.js

/ Digipoke

float（フロート）したボックスの高さが揃わなくて困ることがあります。
いろいろとネットで調べたら「to-R」さんで、これを簡単に解決してくれるスクリプトを配布してくださっていました。

具体的には「Whisper」さんが、floatの問題について詳しい説明をしてくださっています。

ブロック要素が下段へ折り返した時に歯抜けになってしまった場合に、このブロック要素に対してクラス指定するだけで、バッチリ並んでくれます。

何故このようなことになるかと言うと、CSSではブロック要素をfloatして横並びにした場合、高さを指定してやらないとブロックの高さが揃わないのです。(私が方法を知らないだけかもしれませんが・・・）行の一番右端のブロックが、手前（左側）のブロックよりも高さがなければ、一番左端まで折り返すことが出来ないからです。

20130720

heightLine.jsをheadに読み込みます。

[php]
<script type="text/javascript" src="/js/heightLine.js"></script>
[/php]

これで、高さを揃えたいブロック要素に「heightLine」というclass名を付けるだけです。

EC-CUBEの商品一覧を横並びにする場合

（ここでは2.12.2のCSSで説明しています）

記事「商品一覧をCSSのみで横並びに変更する[EC-CUBE2.12]」を参照してください。

CSSでブロックの高さを指定していますが、このJSを利用すると、高さを指定しなくても一番高さのあるブロックに高さが揃い、左端に折れてくれます。

（１）headに、heightLine.jsを読み込む

  1. コンテンツ管理　→　ファイル管理で、heightLine.jsを、利用中のテンプレートのjsディレクトリーにアップロードします。（初期設定のままだとテンプレートは「default」）

  2. デザイン管理　→　PC　→　ブロック設定で、新規ブロックを作成して（ブロック名・ファイル名は任意で）下記のコードを書きます。

  3. デザイン管理　→　PC　→　レイアウト設定で、先ほど作成したブロックが右側に表示されているので、「head」にドラッグ＆ドロップしてください。これで、heightLine.jsがheadに読み込まれます。

[php]
<script type="text/javascript" src="<!–{$TPL_URLPATH}–>js/heightLine.js"></script>
[/php]

（２）商品一覧のCSSの部分で、class（list_area）を下記のように書き変えます。（content.css）

「商品一覧をCSSのみで横並びに変更する[EC-CUBE2.12]」の手順通りに変更している事が前提です。

[php highlight=”2,8″]
div.list_area {
　padding: 0 0 15px 0; /* この行をコメントアウトしていましたが、イキにする(padding-bottomの余白は任意で）*/
/*width: 100%; 元のCSSをコメントアウト*/
overflow: auto;
overflow:hidden;
float: left; /*（追加）横並びに変更のため*/
width: 20%; /* （追加）2カラムの場合で（横並び５商品/写真サイズ120×120）※任意で数値変更*/
/* height:260px; この行を削除*/
}
[/php]

（３）デザイン管理　→　PC　→　ページ詳細設定　→　商品一覧　を編集します。

高さを揃えたいブロック要素に、「heightLine」というclass名を付けるだけです。

[php highlight=”4″]
<!–▼商品–>
<form name="product_form<!–{$id|h}–>" action="?" onsubmit="return false;">
<input type="hidden" name="<!–{$smarty.const.TRANSACTION_ID_NAME}–>" value="<!–{$transactionid}–>" />
<div class="list_area heightLine clearfix">
<a name="product<!–{$id|h}–>"></a>
<div class="listphoto">
以下、略
[/php]