Вывод продуктов в блоках построчно

Рейтинг: 0Ответов: 1Опубликовано: 19.01.2015

Всем привет.

У меня такая проблемка. Для начала скриншот:

alt text

Как вы видите, у меня 4 товара в рядм, потом переходит на другую строчку, и опять 4 товара и т. д. Как сделать через таблицы, я знаю, делаю счетчик, если он равен 4, то добавляю <tr>, и пошло по второй строчке. А вот как сделать через Div? Помогите, очень нужно!

Примерная верстка:

<div style="float:left">1 товар</div>
<div style="float:left">2 товар</div>
<div style="float:left">3 товар</div>
<div style="float:left">4 товар</div>
<br>
<div style="float:left">5 товар</div>
<div style="float:left">6 товар</div>
<div style="float:left">7 товар</div>
<div style="float:left">8 товар</div>
css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Один из простых способов

HTML

<div class="wrapper">
    <div>1 товар</div>
    <div>2 товар</div>
    <div>3 товар</div>
    <div>4 товар</div>
    <div>5 товар</div>
    <div>6 товар</div>
    <div>7 товар</div>
    <div>8 товар</div>
</div>

CSS

.wrapper {
    letter-spacing: -.36em;
}
.wrapper > div {
    display: inline-block;
    box-sizing: border-box; /* + вендорные префиксы */
    width: 25%;
    border: 1px solid #999;
    letter-spacing: normal;
}

Можно так же использовать display со значениями table | table-row | table-cell