在两行或更多行上显示图标，以便每行具有相同数量的图标

Question

我在带有display: inline-block的原始div中有12个图像图标但是当我调整浏览器窗口大小时，我希望在两行或更多行上显示图标，以便每行具有相同数量的图标。

Answer 1

如果我理解正确，您希望在两行或更多行上显示图标，以便每行具有相同数量的图标。实现这一目标的一种方法是使用百分比宽度和断点：

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