バージョン選択

フォーラム

メニュー

オンライン状況

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

PR

先着1,000社 プラグインダウンロード&お申込で1,000円分Amazonギフト券プレゼント amazon pay
広告掲載について

サイト内検索

質問 > フロント機能 > 商品一覧ページの横並びレイアウト崩れについて

フロント機能

新規スレッドを追加する

フラット表示 前のトピック | 次のトピック
投稿者 スレッド
kkkk
投稿日時: 2011/7/13 0:35
対応状況: −−−
新米
登録日: 2011/7/13
居住地:
投稿: 9
商品一覧ページの横並びレイアウト崩れについて
初心者ですがECサイトを構築中です。

過去のスレッドを見て、商品一覧ページをカスタマイズしています。

3列の横並びにしたところ、商品の高さによって歯抜けになってしまいます。

過去のスレを読みあさっているのですが、解決できません。

ご教示いただけると幸いです。

宜しくお願いします。

http://store.petshopgarage.com/html/products/list.php

CSS
/* レイアウト
----------------------------------------------- */
div.list_area {
padding: 0 0 30px 0;
width: 33%;
overflow: hidden;
  position: relative;
float: left;
}

div.listphoto {
padding: 0px 0 30px 0;
text-align: center;

}

/* メインカラム用 1カラム時*/
#one_maincolumn div.listrightbloc {
float: right;
width: 100%;
}

/* メインカラム用 2カラム時*/
#two_maincolumn_right div.listrightbloc ,
#two_maincolumn_left div.listrightbloc {
float: left;#script tag escaped#;
width: 100%;
}

/* メインカラム用 3カラム時*/
#three_maincolumn div.listrightbloc {
float: right;
width: 90%;
}

----------------------------
list.php

<!--▼商品-->
<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 clearfix">
<a name="product<!--{$id|h}-->"></a>
<div class="listphoto">
<!--★画像★-->
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>
</div>
<div class="listrightbloc">
<!--▼商品ステータス-->
<!--{if count($productStatus[$id]) > 0}-->
<ul class="status_icon clearfix">
<!--{foreach from=$productStatus[$id] item=status}-->
<li>
<img src="<!--{$TPL_URLPATH}--><!--{$arrSTATUS_IMAGE[$status]}-->" width="65" height="14" alt="<!--{$arrSTATUS[$status]}-->"/>
</li>
<!--{/foreach}-->
</ul>
<!--{/if}-->
<!--▲商品ステータス-->

<!--★商品名★-->
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
</h3>
<!--★価格★-->
<div class="pricebox sale_price">
<!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
<span class="price">
<span id="price02_default_<!--{$id}-->">
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
</span><span id="price02_dynamic_<!--{$id}-->"></span>
円</span>
</div>

<!--★コメント★-->
<div class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></div>
</div>
</div>
</form>

<!--▲商品-->



<!--{if $smarty.foreach.arrProducts.last}-->
<div style="clear:both;"></div>

フラット表示 前のトピック | 次のトピック


題名 投稿者 日時
 » 商品一覧ページの横並びレイアウト崩れについて kkkk 2011/7/13 0:35
     Re: 商品一覧ページの横並びレイアウト崩れについて fukap 2011/7/13 8:17
     Re: 商品一覧ページの横並びレイアウト崩れについて seasoft 2011/7/13 9:36
     Re: 商品一覧ページの横並びレイアウト崩れについて kkkk 2011/7/14 0:36

 



ログイン


EC-CUBEペイメント

統計情報

総メンバー数は25,888名です
総投稿数は85,818件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1725
4
yuh
1490
5
red
1154
6
468
953
7
umebius
942
8
fukap
907
9
shutta
827
10
tsuji
815
11 ramrun 789
12
tao_s
651
13 karin 642
14 sumida 641
15
homan
633
16 DELIGHT 571
17
patapata
502
18
flealog
483
19
h_tanaka
472
20 tonton 436


ネットショップの壺

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

Copyright© LOCKON CO.,LTD. All Rights Reserved.