html - 如何做 div 元素的网格？

Question

快速提问，我需要帮助，但不知道该怎么做，因为我对 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/智能代码:

        {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}

也欢迎提示。 我的意思是，如果有人会告诉我如何打破这个愚蠢的列表，我可以处理网格。

Answer 1

一种简单的方法是将 .offer-small 类的 div 向左浮动:

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

只要您将它们全部放在一个具有固定宽度的容器元素中，它们就应该很好地紧挨着彼此，并自动换行到下一行。