質問 > フロント機能 > 商品一覧ページの横並びレイアウト崩れについて |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
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> |
fukap |
投稿日時: 2011/7/13 8:17
対応状況: −−−
|
仙人 登録日: 2009/7/7 居住地: 滋賀県 投稿: 907 |
Re: 商品一覧ページの横並びレイアウト崩れについて 例えば、以下のような感じで、float をかけているボックスに、height 属性を加えてはどうですか?
div.list_area { padding: 0 0 30px 0; width: 33%; overflow: hidden; position: relative; float: left; height:200px; } |
seasoft |
投稿日時: 2011/7/13 9:36
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7369 |
Re: 商品一覧ページの横並びレイアウト崩れについて 高さを可変にするなら
<!--{if $smarty.foreach.arrProducts.last}--> ↓ <!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}--> とか?
|
kkkk |
投稿日時: 2011/7/14 0:36
対応状況: −−−
|
新米 登録日: 2011/7/13 居住地: 投稿: 9 |
Re: 商品一覧ページの横並びレイアウト崩れについて seasoftさんのアドバイスで解決しました!
<!--{if $smarty.foreach.arrProducts.last}--> ↓ <!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}--> 本当にありがとうございました! fukapさんもありがとうございました! 助かりました〜。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |