0

簡単な質問です。私はhtml/cssについて何も知らず、他のプログラミングと一緒にボーナスタスクとしてこれを取得したので、助けが必要で、何をすべきかわかりません。

私が持っているもの： 次々に

私が欲しいもの： グリッド

これがcssコードです

.offer-small { width: 278px; height: 209px; position: relative; margin-bottom: 25px; }
.offer-small img { width: 278px; height: 209px; }
.offer-small .mask { width: 278px; height: 209px; cursor: pointer; position: absolute; top: 0; left: 0; background: url('../images/photo-small-mask.png'); }
.offer-small .desc { display: none; font-size: 10pt; width: 258px; height: 189px; padding: 10px; position: absolute; top: 0; left: 0; background: url('../images/photo-small-black-transparent.png'); color: white; text-shadow: 1px 1px #000000}
.offer-small .desc p { font-size: 9pt; color: #f2f0e4; }
.offer-small .desc table.compare { width: 160px; height: 48px; margin: 0 auto 0 auto; background: url('../images/offer-table.png'); color: #f2f0e4; }
.offer-small .desc table td { text-align: center; padding-bottom: 10px; }
.offer-small .desc table td.small { font-size: 8pt; }
.offer-small .title { width: 258px; background: url('../images/offer-transparent.png'); padding: 2px 10px; position: absolute; top: 120px; left: 0;  }
.offer-small .title strong { font-size: 9pt; color: #ffffff; }
.offer-small .title small { font-size: 8pt; color: #f2f0e4; }
.offer-small .title small strong { font-size: 8pt; color: #f2f0e4; }
.offer-small .view-offer { position: absolute; top: 160px; left: 150px; }

.view-offer { display: block; width: 120px; height: 44px; background: url('../images/button-view-offer.png'); }
.btnSendOrder { width: 260px; height: 75px; border: 0; background: url('../images/button-send-order.png'); cursor: pointer; }
.toLeft { float: left; margin-right: 25px; }

Html / smartyコード：

        {if $random}{foreach item=item from=$random}

                <div class="offer-small">
                    <img src="{$smarty.const.APP_URL}/userfiles/photos/{if $item.item_photo}s_{$item.item_photo}{else}blank_small.jpg{/if}" alt="" />
                    <div class="desc">
                        <strong>{$item.item_name|truncate:30}</strong>
                        <p>{$item.item_short_description|truncate:120}</p>
                        <p align="right"><a href="{$smarty.const.APP_URL}oferta/{$item.item_category}/{$item.item_title}" class="view-offer"></a></p>
                    </div>
                    <div class="title">
                        <strong>{$item.item_name|truncate:30}</strong><br/><small>Cena teraz: <strong>{$item.item_cost_now|money} zł</strong> zamiast <strong>{$item.item_cost_before|money} zł</strong></small><br/><br/>
                        <strong>OSZCZĘDZASZ <big>{$item.item_cost_before-$item.item_cost_now|money}</big> zł</strong>
                    </div>
                </div>

                {/foreach}{/if}

ヒントも大歓迎です。誰かがこのばかげたリストを破る方法を教えてくれれば、グリッドの作成を処理できるということです。

4

1 に答える 1

2

.offer-small簡単な方法は、クラスのdivを左にフロートさせることです。

.offer-small { 
width: 278px; 
height: 209px; 
position: relative; 
margin-bottom: 25px; 
float:left;
}

それらがすべて固定幅のコンテナ要素内にある限り、それらは互いに隣接してうまく収まり、次の行に自動的に折り返されるはずです。

于 2012-10-20T17:22:33.637 に答える