スタイルシートで対応できますか？

質問

ショッピングカートを作成しており、スキンテンプレートHTML内に$cart_in変数を
入れること、横１列で縦並びに商品が陳列されます。これを、CGIをいじらないで（CGI内では横に繰り返しすることは出来ないので・・・）、CSS段組等で横に２列、３列で折り返し、縦に繰り返す方法で対応できないでしょうか？
例えば、一番外はテーブルを使い、入れ子でCSS段組をして、テーブルサイズを調整すれば、横に繰り返すとか？初心者なのでできれば、簡単なソースで回答していただけるとありがたいです。

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

<table>
<tbody>
<tr>
<td>
$cart_in
</td>
</tr>
</tbody>
</table>
---------------------------------------------------------------------------------

回答No.3

steel_gray

わりと一般的なfloatを使った方法だとこうなります。
※テンプレート（id="SYOUHIN"という大枠で個別のdivを囲う）
<div id="SYOUHIN">$cart_in<br class="clearfix"></div>

※CSS
#SYOUHIN {
width:400px;/*大枠の幅を指定。中のdivのwidthが100pxなら4つ並べる*/
}
#SYOUHIN div{
float:left;/*個別のブロックを浮動化*/
/*個別のブロック間の余白を調整するなら以下。*/
/*もちろん大枠の幅のほうも合わせた数値にしておく*/
margin-right:XXpx;/*右隣りとの余白*/
padding-bottom:XXpx;/*下との余白（marginでは調整が効かないケースもあるのでpaddingを使用）*/
}
#SYOUHIN .clearfix{
clear:both;/*浮動化の終了*/
}

回答No.2

steel_gray

全体幅をCSSで制限する事で折り返させる事は可能ですが、
何個一行に書いたら折り返す、といった個数での折り返し制御は無理そうです。

テンプレート上は
<div id="SYOUHIN">$cart_in</div>
としておき

スタイルは以下。
<style type="text/css">
#SYOUHIN {width:XXem;}/* XX には文字数*/
</style>

$cart_inを実際に展開させるとどのようになるかの具体例があるともうちょっと別の方法があるかも。
（というか、それがわからないのでこの回答の例だと、「商品」の途中で改行が入る可能性もあります。）

補足

ちょっと質問の仕方がわかりづらくて申し訳ありません。
質問の内容とちょっと変わってしましますが、例えば

<div style="width : 100px;height : 100px;">商品ブロック</div>

という一つのブロックがあり、このブロックの一つに自動的にCGIスクリプトで商品画像、価格、カートボタンを入れたものが入ります。

その為、HTMLスキン内の商品ブロックの中に$cart_in$と一つのブロックでしか書き込むことができず、自動的に吐き出したCGIが下に繰り返します。そのため、HTML上では、この商品ブロックのタグが１つしか書き込まれていないので、下に繰り返されると思いますが、商品ブロックタグである<div>----</div>を回り込みで指定するかなどの方法はないでしょうか？逆に外に一つ大きなMainブロックを作り全体サイズを指定してとか？入れ子にするとか？

申し訳ございませんが、わかればご教授下さい。

回答No.1

noname#39970

multi-column というcss3のstyleによってなら実現できるみたいだけどIEでは対応できないかも

http://deegg.main.jp/ref/mozilla/naro/2005gecko_innovation.html#multi_column
firefoxでも1.5の時に試験的に使えるだけみたいで2.xはどうなのか…一応段組表示されてるけど(2.0.0.6)

補足

CSS3のスタイルも今後勉強して行きたいと思います。圧倒的にＩＥユーザーが多いので、ＩＥ対応してくれることを期待したいです。
今後のＩＥもCSS3に対応されていくと思いますので今から勉強してみます。