[EC-CUBE] V 2.4.3
[レンタルサーバ] infitoPLUS
[OS] Windows XP
[PHP] Version 5.2.9-2
[データベース] Mysql v 5.0.83
[ブラウザ] Firfox バージョン3.6.2

商品詳細画面のサブ商品画像を三列横並び、五個ある場合は上から三列＞ニ列と配置したい。
サブテキスト、サブタイトルは削除しイメージのみを表示。
<ul><li>タグを使い、float:left;を指定。ですが、これですと左に4つのイメージのかたまりが出来るだけ、三列になりません。
さらに、ライトブロックの商品名や、選択ボックスの列の長さが、違うと4つのかたまりの画像が、上下ずれてしまいます。
<table>タグなどもためしたのですが、うまくいきません。
前にこのコミュでも質問させていただいたのですが、問題がまったく解決いたしません。どなたか、お知恵をおかし下さい。お願い致します。

管理画面＞商品詳細ページ
にて下記のようにul,li指定

<!--▼サブコメントここから-->
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{*
<!--{if $arrProduct[$key] != ""}-->
*}-->
<div class="subarea">
<!--{*
<h3><!--★サブタイトル★--><!--{$arrProduct[$key]|escape}--></h3>
*}-->
<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
<!--拡大写真がある場合ここから-->
<!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrFile[$key].filepath != ""}-->
<div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br}--></div>
<div class="subphotoimg">
<!--{if $arrFile[$lkey].filepath != ""}-->
<ul><li>
<a href="<!--{$arrFile[$lkey].filepath}-->" class="colorbox"rel="example1">
<!--{/if}-->
<!--サブ画像-->
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->"</td>
<!--{* width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />*}-->
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
</li>
</ul>

<!--{*
<a href="<!--{$arrFile[$lkey].filepath}-->"
class="colorbox"rel="example1-2"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion02');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion02');">
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" />
</a>
*}-->
<!--{/if}-->

</div>
<!--拡大写真がある場合ここまで-->
<!--{else}-->
<p><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br}--></p>
<!--{/if}-->
</div>
<!--{*
<!--{/if}-->
*}-->
<!--{/section}-->
<!--▲サブコメントここまで-->

CSSにて、

/* サブタイトル
----------------------------------------------- */
div.subarea {
width: 580px;
padding: 30px 0 0 0px;
margin: 0 auto;
}

div.subarea h3 {
width: 580px;
font-size: 120%;
margin: 0 0 10px 0;
padding: 5px 10px;
background-color: #e4e4e4;
}

/*
div.subtext {
float: right;
width: 365px;
}
*/
div.subphotoimg ul {
display: inline;
}

div.subphotoimg li {
float: left;
display: block;
width: 202px;
}

div.subphotoimg p {
margin: 5px 0 0 0;
text-align:right;
}

このような記述ですが、何が問題でしょうか？
この外に、何か良い方法があれば、どおなたか教えて下さい。

過去スレにもあったと思いますが、1列目の前や3列目の後に clear: both; の要素を配置して置けば解決すると思います。

私の場合は、リストや表ではなく、div をよく使います。参考まで。

----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

seasoftさん、ありがとうございます。
試してみます。

＞過去スレにもあったと思いますが、

すいません探しきれませんでした。よろしかったらURLを貼ってもらえませんでしょうか？

URL は覚えていませんが、この中にいくつか参考になる記事があると思います。
http://xoops.ec-cube.net/search.php?query=clear%3A+both%3B&mid=5&action=showall&andor=AND

----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

seasoftさん、ありがとうございます。

＞URL は覚えていませんが、この中にいくつか参考になる記事があると思います。
http://xoops.ec-cube.net/search.php?query=clear%3A+both%3B&mid=5&action=showall&andor=AND

参考にさせていただいたのですが、問題が解決致しません。

＞過去スレにもあったと思いますが、1列目の前や3列目の後に clear: both; の要素を配置して置けば解決すると思います。

何処の箇所かイマイチ分からず、色んな箇所に入れてみたのですが、
反映されると、デフォルトの縦表示になってしまいます。
また、詳細画面ですが、上からセンター商品説明＞左に商品画像＞右に価格やカラー＞センター下にサブ画像というデフォルトの配置です。
サブ画像ですが、左や右の影響を受けているのか、右カラムの行が長かったり、売り切れのため、購入ボタンが無かったりすると、
サブイメージの横の列が乱れてしまいます。
サブ画像部分は
<!--サブ画像-->
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->"</td>
<!--{* width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />*}-->
<!--{if $arrFile[$lkey].filepath != ""}-->
でサブ1,2,3などと分かれていませんよね？
これでも、divを使用して横並びは可能なのでしょうか？
長々とすみませんが、なかなか解決しないので、ご教授お願いいたします。

たしか剰余を使って、行末でクリアするロジックだったと思います。


> でサブ1,2,3などと分かれていませんよね？

繰り返し処理のためだと思います。


> これでも、divを使用して横並びは可能なのでしょうか？

予約変数 $smarty 配下でカウンターがあったと思いますので、それで対応した記憶があります。

----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

http://2since2006.seesaa.net/article/254242723.html

ここにまとめてあります。