flexの横並びをかけたい状況。flexを記述してるが横並びが反映されない。

現状、添付画像Aの並びを

希望の並び、添付画像Bのようにしたい。

html
1<!-- ヘッダをインクルード -->
2<{include file='header.tpl' titletag=''}>
3
4
5    
6<div id="main_area2">
7        <!-- お知らせ -->
8<{if !$genre_id && !$act}>
9<div class="title">关于本网站</div>
10<{$top_info}>
11<{/if}>
12<!--// お知らせ -->
13                      
14
15    
16<div class="title"><{if $genre_name}><{$genre_name}><{else}>商品一览<{/if}></div>
17
18<!-- カテゴリ説明文表示 -->
19<{if $genre_setsumei}>
20<div><{$genre_setsumei}></div>
21<{/if}>
22<!--// カテゴリ説明文表示 -->
23
24<!-- 検索条件表示 -->
25<{if $act == 'search'}>
26<div>关键字检索[ <b><{$search_keyword}></b> ]</div>
27<{/if}>
28<!--// 検索条件表示 -->
29
30<!-- 商品があるときは商品一覧を表示 -->
31<{if count($goodslist) > 0}>
32    <!-- 並び替え(プルダウンメニュー) -->
33    <div align="right">
34    <form name="frm" action="<{$top_acturl}>" method="post">
35    <{$sort_hidden}>
36    <select name="sortkey">
37    <option value="1"<{if $sortkey == 1}> selected<{/if}>>新商品顺序</option>
38    <option value="2"<{if $sortkey == 4}> selected<{/if}>>价位低的顺序</option>
39    <option value="3"<{if $sortkey == 5}> selected<{/if}>>价位高的顺序</option>
40    </select>
41    <input type="submit" value="排列调换">
42    </form>
43    </div>
44    <!--// 並び替え(プルダウンメニュー) -->
45
46    <hr>
47
48    <!-- ページ送り -->
49    <table border="0" width="100%"><tr>
50    <td width="20%"><{if $goodslist_prev}><a href="<{$goodslist_prev}>">&lt;回到前一页</a><{/if}></td>
51    <td width="40%" align="center">共[<{$goodslist_allrows}>]件中，表示 [<{$goodslist_srows}> - <{$goodslist_erows}>]件。</td>
52    <td width="20%" align="right"><{if $goodslist_next}><a href="<{$goodslist_next}>">进入下页&gt;</a><{/if}></td>
53    </tr></table>
54    <!--// ページ送り -->
55
56    <!-- 商品一覧(一覧形式の例) -->
57    <{section name=key loop=$goodslist}>
58        <!-- 1商品ずつの定義 -->
59        <div class="goodslist_box">
60        <table border="0" width="100%"><tr valign="top">
61            
62        <td width="30%" align="center"><div class="thumbnail"><a href="<{$goodslist[key].url}>"><{if $goodslist[key].thumbnail}><img src="<{$goodslist[key].thumbnail}>"><{else}><img src="/tpl_img/proto_ja/nopic100.gif"><{/if}></a></div></td>
63            
64        <td>
65        <a href="<{$goodslist[key].url}>"><{$goodslist[key].name}><{if $goodslist[key].num != ''}>(<{$goodslist[key].num}>)<{/if}></a><{if $goodslist[key].embargo}>&nbsp;*不能发送到日本以外的国家<{/if}><br>
66        <{$goodslist[key].price2}>&nbsp;<{$tsuka_tani}><br>
67        <{$goodslist[key].setsumei|mb_truncate:50}>
68        <!-- カートボタンフォーム -->
69        <div align="right">
70        <form action="<{$cart_acturl}>" method="post">
71        <{$goodslist[key].cart_hidden}>
72        <{section name=key2 loop=$goodslist[key].opt}>
73            <{$goodslist[key].opt[key2].name}>
74            <select name="goods_opt[]">
75            <{html_options values=$goodslist[key].optv[key2].id output=$goodslist[key].optv[key2].name}>
76            </select><br>
77        <{/section}>
78        <!-- 在庫がない時はカートボタンを表示しない -->
79        <{if $goodslist[key].zaiko_flag && $goodslist[key].zaikosu <= 0}>
80            *没有库存
81        <{else}>
82            订购数量:<input type="text" name="kosu" size="4" value="<{$goodslist[key].min_kosu}>"><{$goodslist[key].tani}>
83            <input type="submit" value="装进购物车">
84        <{/if}>
85        <!--// 在庫がない時はカートボタンを表示しない -->
86        </form>
87        </div>
88        <!--// カートボタンフォーム -->
89        </td>
90        </tr></table>
91        </div>
92        <!--// 1商品ずつの定義 -->
93    <{/section}>
94    <!--// 商品一覧(一覧形式の例) -->
95
96    <!-- ページ送り -->
97    <table border="0" width="100%"><tr>
98    <td width="20%"><{if $goodslist_prev}><a href="<{$goodslist_prev}>">&lt;回到前一页</a><{/if}></td>
99    <td width="40%" align="center">共[<{$goodslist_allrows}>]件中，表示 [<{$goodslist_srows}> - <{$goodslist_erows}>]件。</td>
100    <td width="20%" align="right"><{if $goodslist_next}><a href="<{$goodslist_next}>">进入下页&gt;</a><{/if}></td>
101    </tr></table>
102    <!--// ページ送り -->
103<!--// 商品があるときは商品一覧を表示 -->
104<{else}>
105<!-- 商品がないときはメッセージを表示 -->
106    <div align="center">没有该商品。</div>
107<{/if}>
108<!--// 商品がないときはメッセージを表示 -->
109
110    
111<div class="clearing"></div>
112</div><!--// main area2 -->
113
114<!-- フッタをインクルード -->
115<{include file='footer.tpl'}>

CSSについて、画像Bにすべく display: flex;と
flex-wrap: wrap;が入っていなかったので、挿入したみたのですが
反映がされず、原因についてお力添えいただけますと幸いです。

css
1@media(min-width:780px){
2.goodslist_box {
3    background-color:#f7f7f3;
4    display: flex;
5    flex-wrap: wrap;
6    justify-content: center;
7    padding:10px;
8    margin:10px 0px 10px 0px;
9        width: 50%;
10}
11/* マス目形式 */
12.goodslist_box2 {
13    float:left;
14    padding:10px;
15}
16}
17
18@media(max-width:779px){
19.goodslist_box {
20    background-color:#f7f7f3;
21    width: 100%;
22    height: auto;
23    text-align: center;
24}

hatena19

2021/02/01 10:40

できれば、コンパイル後のHTMLを提示してもらった方が回答が付きやすいかと。Smarty使っている人以外でも回答できるので。

行動規範の内容に同意します

回答1件

ベストアンサー

コンパイル後のコードがないので間違っているかもしれませんが、
おそらく<div class="goodslist_box"></div>がループで生成されていそうなので、
これをwrapしてflex指定するといいと思います。

html
1<div class="goodslist_wrap">
2    <!-- 商品一覧(一覧形式の例) -->
3    <{section name=key loop=$goodslist}>
4        <!-- 1商品ずつの定義 -->
5        <div class="goodslist_box">
6            <table>...</table>
7        </div>
8    <{/section}>
9</div>

css
1.goodslist_wrap{
2    display: flex;
3    flex-wrap: wrap;
4    justify-content: flex-start;
5}
6
7.goodslist_box {
8    background-color:#f7f7f3;
9    padding:10px;
10    margin:10px 0px 10px 0px;
11    width: 50%;
12    box-sizing: border-box;
13}