Верстка, CSS, HTML, SVG

Как вывести по два элемента с товаром в строке?

Необходимо чтобы в одной строке отображалось по 2 проекта на широких мониторах, а на узких - по одному проекту.

HTML:
{if count($catgoods)}

{foreach from=$catgoods item=items}


url}">images[0]->middle}" alt="{$items->name}" title="{$items->name}" width="400">





url}" class="content-catalog-link">{$items->name}




Категория: {$cat_info.cat_name}




{if $items->fld->area.value}
Общая площадь: {$items->fld->area.value} м2
{/if}




{foreach from=$items->classes item=class}
class_url}" class="class_btn {$class->class_alias}">
{/foreach}





{if $items->fld->price.value != ''}
{if $items->fld->sale.value !=''}
Цена:
{math equation="(area * 10800)" area=$items->fld->area.value eprice=$items->fld->price.value|regex_replace:"/[\s]/":"" esale=$items->fld->sale.value assign="math_var"}{$math_var|number_format:0:".":" "} руб. {/if}
{/if}


{/foreach}

{/if}

CSS:
.content-catalog-box {
border: 1px solid #ddd6c4;
padding: 10px;
margin-top: 5px;
}
.content-catalog-item {
overflow: hidden;
margin-bottom: 10px;
}
.content-catalog-item a, .content-catalog-item strong {
font-weight: normal;
color: #39621b;
}
.content-catalog-item img {
float: left;
border: 5px solid #e4dcc6;
margin: 10px;
margin-right: 10px;
margin-left: 5px;
-webkit-filter: contrast(125%);
}
ВВ
Владимир Воронов
285
тут стилями можно прописать.. просто блоку пропиши размеры так чтобы влез второй, потом float:left; или display:inline-block; и они будут по 2 штуки идти
Антон Чибриков
Антон Чибриков
4 842
Лучший ответ
Владимир Воронов Прописал:
.content-catalog-box {
border: 1px solid #ddd6c4;
padding: 10px;
margin-top: 5px;
width:300px;
display:inline-block;

Результат на скрине. float:left; тоже пробовал, не помогло.
Владимир Воронов А всё, разобрался. Надо было в .content-catalog-item. Спасибо за помощь.
Только писать в media css под все разрешения мониторов, вот список:

@media screen and (max-width: 1880px) and (min-width: 1680px) {}
@media screen and (max-width: 1680px) and (min-width: 1600px) {}
@media screen and (max-width: 1600px) and (min-width: 1536px) {}
@media screen and (max-width: 1536px) and (min-width: 1440px) {}
@media screen and (max-width: 1440px) and (min-width: 1280px) {}
@media screen and (max-width: 1280px) and (min-width: 1200px) {}
@media screen and (max-width: 1200px) and (min-width: 1152px) {}
@media screen and (max-width: 1152px) and (min-width: 1024px) {}
@media screen and (max-width: 1024px) and (min-width: 800px) {}
@media screen and (max-width: 800px) and (min-width: 700px) {}
@media screen and (max-width: 700px) and (min-width: 600px) {}
@media screen and (max-width: 600px) and (min-width: 500px) {}
@media screen and (max-width: 500px) and (min-width: 400px) {}
@media screen and (max-width: 400px) and (min-width: 200px) {}

В фигурные скобки вписываешь ксс для каждого разрешения с дивами и тд, например:

@media screen and (max-width: 600px) and (min-width: 500px) {
#socials-top {
float: right;
position: absolute;
bottom: 22px;
right: 0px;
}
}

Только свои стили. И просто под каждое разрешение, позицианирование блоков, их ширину выстраиваешь и все.
Александр Урванцев
Александр Урванцев
6 131

Похожие вопросы