バージョン選択

フォーラム

メニュー

オンライン状況

35 人のユーザが現在オンラインです。 (28 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 35
もっと...

サイト内検索

質問 > フロント機能 > 商品一覧で、横4列ごとに並べたい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
it-plus
投稿日時: 2011/9/23 1:54
対応状況: −−−
常連
登録日: 2011/9/23
居住地:
投稿: 31
商品一覧で、横4列ごとに並べたい
バージョンは、2.11.0です。

商品一覧で横4列ごとに並べて表示する方法が分かりません。
CSSで横並びにはしたのですが、それだけだと各商品のコメント長さがバラバラで縦幅が合わず横に4列キレイに並んでくれません。

どなたかご教授頂けないでしょうか。
宜しくお願い申し上げます。
karin
投稿日時: 2011/9/23 3:44
対応状況: −−−
仙人
登録日: 2008/9/15
居住地: 東京都
投稿: 689
Re: 商品一覧で、横4列ごとに並べたい
it-plusさん、こんばんは。

横並びにしたブロック要素の高さを揃えたい ということですね。

単純なレイアウトであればCSSでも対応可能かと思いますが、
下記で紹介されているJavaScriptライブラリを利用する方法もあります。
ご参考になれば幸いです。

・ブロックレベル要素の高さを揃えるheightLine.js[to-R]
http://blog.webcreativepark.net/2007/07/26-010338.html

・jQueryでブロック要素の高さを揃えてみる - 徒書
http://www.akatsukinishisu.net/itazuragaki/js/i20070801.html


----------------

it-plus
投稿日時: 2011/9/26 17:18
対応状況: −−−
常連
登録日: 2011/9/23
居住地:
投稿: 31
Re: 商品一覧で、横4列ごとに並べたい
ご教授頂きまして、ありがとうございます。

しかしながら、私がしたいのはdivを横4列に並べて大枠のdivで囲んで高さを揃えたいです。
説明不足で申し訳ございません。

私が考えるに、おそらくlist.tplにループとif文を使い
商品が1以上〜3以下の場合は大枠の<div>を始めて最後に</div>で閉じる。
4以上ある場合は4が終わったら大枠の</div>で閉じてさらに商品がある場合はまた大枠の<div>を始める。

というような仕様になるのかなと思っております。

分かりづらい説明で申し訳ございませんが、宜しくお願い致します。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,873名です
総投稿数は110,000件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2313
5
umebius
2085
6
yuh
1819
7
h_tanaka
1646
8
red
1570
9
mcontact
1295
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.