使用列计数，如果分辨率更小，您可以动态地从3列更改为2列吗？

Question

我正在使用column-count属性设置一个包含三列多个div的页面，这在较大的屏幕上看起来很棒。每个div的固定宽度为500px（包含图像）。

然而，当在较小的屏幕上工作时，浏览器会尝试强制原始\三列中的内容到达两列时。当内容开始重叠时，是否有一种首选的方法让内容转到两列？

Answer 1

如果您使用column-width属性而不是column-count，浏览器会根据需要自动调整列数以填充可用空间。

http://codepen.io/cimmanon/pen/CcGlE

.foo {
    columns: 500px; // shorthand, prefixes may be necessary
}

Answer 2

@media (max-width: 500px) {
  .your element selector here {
 -webkit-column-count: 2;
  -moz-column-count:    2;
  column-count:         2;

  }
}