質問 > フロント機能 > 商品一覧ページの横並びレイアウト崩れについて |
フロント機能
フラット表示 | 前のトピック | 次のトピック |
投稿者 | スレッド |
---|---|
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 |