2016-12-20 7 views
0

У меня есть 12 значков изображений в raw в divs с display: inline-block, но когда я изменяю размер окна браузера, я хочу отображать значки на двух или более строках, чтобы каждая строка имеет одинаковое количество значков.Отображать значки на двух или более строках, чтобы каждая строка имела одинаковое количество значков.

+2

что это за концепция нижнего уровня? – madalinivascu

+0

Что вы подразумеваете под сглаживанием? .. Если вы имеете в виду, что вы хотите, чтобы divs отображались по одному для каждой строки. Вы можете удалить отображение: встроенный блок для них или попробовать отображение: flex тоже чувствителен – Geeky

+0

Это не должно быть одно в ряд. Это должно быть все в одной строке, но когда я изменяю размер окна браузера, я хочу, чтобы они выравнивали выравнивание, например 6 сверху и 6 на нижней или 3 сверху и 3 внизу. –

ответ

0

Если я правильно понял, вы хотите отображать значки на двух или более строках, чтобы каждая строка имела одинаковое количество значков. Один из способов достижения этого - использовать процентные ширины и точки останова:

.icon { 
    width: 33.333%; // on < 600px display 3 icons on a row 
} 

@media (min-width: 600px) { 
    .icon { 
    width: 25%; // on > 600px display 4 icons on a row 
    } 
} 

@media (min-width: 900px) { 
    .icon { 
    width: 16.666%; // on > 900px display 6 icons on a row 
    } 
}